State Management – Redux Toolkit

Introduction

Redux Toolkit is the official and recommended way to write Redux logic. It was introduced to reduce boilerplate, simplify configuration, and enforce best practices automatically.

Modern React applications rarely use plain Redux anymore. Instead, Redux Toolkit (RTK) is used to build scalable, maintainable, and production-ready state management systems.

What is Redux Toolkit?

Redux Toolkit is a set of tools that simplifies:

• Store configuration
• Reducer and action creation
• Immutable state updates
• Async logic handling

Redux Toolkit is built on top of Redux, not a replacement for it.

Why Redux Toolkit Was Introduced

Problems with traditional Redux:

• Too much boilerplate
• Multiple files for actions and reducers
• Manual immutable updates
• Complex store setup

Redux Toolkit solves these by:

• Reducing code
• Combining logic into slices
• Using Immer for safe mutations
• Providing built-in middleware

Key Features of Redux Toolkit

• configureStore
• createSlice
• createAsyncThunk
• Built-in Immer support
• DevTools enabled by default
• Better folder structure

Redux Toolkit Architecture

Redux Toolkit still follows Redux principles:

• Single source of truth
• State is read-only
• Reducers are pure functions

But it simplifies implementation, not concepts.

Installing Redux Toolkit

npm install @reduxjs/toolkit react-redux

This installs:

• Redux Toolkit
• React bindings for Redux

Core APIs of Redux Toolkit

configureStore

Used to create the Redux store with minimal configuration.

createSlice

Creates reducer logic and action creators together.

createAsyncThunk

Handles asynchronous logic like API calls.

Basic Redux Toolkit Example

Step 1: Create a Slice

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

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

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

Explanation:

• No switch case
• No action constants
• Safe state mutation using Immer

Step 2: Configure the Store

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

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

Benefits:

• Automatically adds Redux DevTools
• Includes default middleware
• Supports multiple reducers easily

Step 3: Provide Store to React App

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

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

Step 4: Use Redux Toolkit in Components

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

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

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(decrement())}>-</button>
    </div>
  );
}

export default Counter;

Async Operations with createAsyncThunk

Redux Toolkit simplifies API calls.

Example

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

export const fetchUsers = createAsyncThunk(
  "users/fetchUsers",
  async () => {
    const response = await fetch("/api/users");
    return response.json();
  }
);

const usersSlice = createSlice({
  name: "users",
  initialState: { data: [], loading: false },
  extraReducers: (builder) => {
    builder
      .addCase(fetchUsers.pending, (state) => {
        state.loading = true;
      })
      .addCase(fetchUsers.fulfilled, (state, action) => {
        state.loading = false;
        state.data = action.payload;
      })
      .addCase(fetchUsers.rejected, (state) => {
        state.loading = false;
      });
  },
});

export default usersSlice.reducer;

Handling Loading and Error States

Best practice:

• loading boolean
• error message
• data container

This ensures better UX and predictable state updates.

Folder Structure Best Practice

src/
  store/
    index.js
  features/
    users/
      usersSlice.js
    auth/
      authSlice.js

Keeps Redux logic modular and scalable.

Redux Toolkit vs Traditional Redux

When to Use Redux Toolkit

Use Redux Toolkit when:

• Application is medium to large
• Global state is complex
• API-driven applications
• Predictable state updates are required

Avoid when:

• App is very small
• State is local-only
• No shared data

Common Mistakes with Redux Toolkit

• Storing UI-only state globally
• Using one large slice
• Ignoring async error handling
• Mutating state outside reducers
• Overusing Redux for simple apps

Interview Questions and Answers – Redux Toolkit

1. What is Redux Toolkit?

Redux Toolkit is the official toolset for efficient Redux development.

2. Why should we use Redux Toolkit?

It reduces boilerplate and enforces Redux best practices.

3. What is createSlice?

It combines reducer logic and actions in a single file.

4. How does Redux Toolkit handle immutability?

Using Immer internally.

5. What is createAsyncThunk?

A utility to handle async logic like API calls.

6. Does Redux Toolkit replace Redux?

No, it simplifies Redux usage.

7. Is Redux Toolkit suitable for large apps?

Yes, it is designed for scalability.

8. Does Redux Toolkit support DevTools?

Yes, by default.

9. Can we use Redux Toolkit without React?

Yes, Redux Toolkit is framework-agnostic.

10. Is Redux Toolkit production-ready?

Yes, it is the recommended standard.