In the previous blog, we learned the core concepts of Redux — store, actions, and reducers. While powerful, vanilla Redux can feel boilerplate-heavy. Writing separate action types, action creators, and reducers quickly becomes repetitive.

That’s why the Redux team introduced Redux Toolkit (RTK).

Redux Toolkit is the official, recommended way to write Redux logic in modern React apps. It makes Redux simpler, reduces boilerplate, and comes with best practices built-in.

Today, we’ll explore Redux Toolkit in React, step by step.

Why Redux Toolkit?

Here’s why most developers prefer RTK over vanilla Redux:

• Less boilerplate → no need to manually write action creators.
• Slices → reducers + actions bundled together.
• Built-in DevTools support → better debugging.
• Immutable updates handled automatically with Immer.js.
• Scalable structure → great for large projects.

Step 1: Install Redux Toolkit

npm install @reduxjs/toolkit react-redux

npm install @reduxjs/toolkit react-redux

Step 2: Create a Slice

In RTK, we use createSlice to define state + reducers + actions in one place.

👉 Create a counterSlice.js:

import { createSlice } from "@reduxjs/toolkit";

const counterSlice = createSlice({
  name: "counter",
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    },
  },
});

// Export actions
export const { increment, decrement, incrementByAmount } = counterSlice.actions;

// Export reducer
export default counterSlice.reducer;

import { createSlice } from "@reduxjs/toolkit";

const counterSlice = createSlice({
  name: "counter",
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    },
  },
});

// Export actions
export const { increment, decrement, incrementByAmount } = counterSlice.actions;

// Export reducer
export default counterSlice.reducer;

👉 Key points:

• createSlice automatically generates actions (increment, decrement).
• Reducers can directly “mutate” state because RTK uses Immer under the hood.
• action.payload is used for dynamic values.

Step 3: Configure Store

Create store.js:

import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./counterSlice";

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export default store;

import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./counterSlice";

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export default store;

👉 configureStore is an improved version of createStore (vanilla Redux). It automatically adds good defaults like middleware and DevTools.

Step 4: Provide Store in React

In index.js:

import React from "react";
import ReactDOM from "react-dom/client";
import { Provider } from "react-redux";
import App from "./App";
import store from "./store";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

import React from "react";
import ReactDOM from "react-dom/client";
import { Provider } from "react-redux";
import App from "./App";
import store from "./store";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

Step 5: Use Redux Toolkit in Components

In App.js:

import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { increment, decrement, incrementByAmount } from "./counterSlice";

function App() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <div style={{ textAlign: "center", marginTop: "50px" }}>
      <h1>Redux Toolkit Counter</h1>
      <h2>{count}</h2>

      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
      <button onClick={() => dispatch(incrementByAmount(5))}>
        Increment by 5
      </button>
    </div>
  );
}

export default App;

import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { increment, decrement, incrementByAmount } from "./counterSlice";

function App() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <div style={{ textAlign: "center", marginTop: "50px" }}>
      <h1>Redux Toolkit Counter</h1>
      <h2>{count}</h2>

      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
      <button onClick={() => dispatch(incrementByAmount(5))}>
        Increment by 5
      </button>
    </div>
  );
}

export default App;

👉 Now, your counter works with Redux Toolkit — but with less code and more readability compared to vanilla Redux.

Redux Toolkit Flow

Here’s the flow of Redux Toolkit in React:

1. User clicks a button → dispatch(action).
2. Action is generated automatically from slice.
3. Reducer updates the store using Immer.
4. Components subscribed with useSelector re-render.

Real-World Example: Authentication State

Redux Toolkit is commonly used for authentication. Example:

const authSlice = createSlice({
  name: "auth",
  initialState: { isLoggedIn: false },
  reducers: {
    login: (state) => {
      state.isLoggedIn = true;
    },
    logout: (state) => {
      state.isLoggedIn = false;
    },
  },
});

export const { login, logout } = authSlice.actions;
export default authSlice.reducer;

const authSlice = createSlice({
  name: "auth",
  initialState: { isLoggedIn: false },
  reducers: {
    login: (state) => {
      state.isLoggedIn = true;
    },
    logout: (state) => {
      state.isLoggedIn = false;
    },
  },
});

export const { login, logout } = authSlice.actions;
export default authSlice.reducer;

Then in components:

const isLoggedIn = useSelector((state) => state.auth.isLoggedIn);
const dispatch = useDispatch();

<button onClick={() => dispatch(login())}>Login</button>
<button onClick={() => dispatch(logout())}>Logout</button>

const isLoggedIn = useSelector((state) => state.auth.isLoggedIn);
const dispatch = useDispatch();

<button onClick={() => dispatch(login())}>Login</button>
<button onClick={() => dispatch(logout())}>Logout</button>

👉 This is much cleaner than writing vanilla Redux boilerplate.

• Redux Toolkit Official Docs
• React Redux Documentation

Conclusion

In this blog, we learned Redux Toolkit in React and why it’s the recommended way of using Redux today. We covered:

• Why Redux Toolkit is better than vanilla Redux.
• How to create a slice with reducers and actions.
• How to configure the store with configureStore.
• Using useSelector and useDispatch in components.
• Real-world example: Authentication state management.

In the next blog (Day 22), we’ll explore Zustand in React, a lightweight and simpler alternative to Redux Toolkit.