How does Redux Toolkit (RTK) work, and what did it improve over classic Redux?

Short answer

It provides built-in functions such as createSlice and configureStore that combine Actions and Reducers, using Immer to allow updates that look mutable while producing a new immutable state (Immutability).

Explanation

RTK solved the repetitive boilerplate of traditional Redux. With Immer included, you can write state.value += 1 without copying the object manually with the spread operator. configureStore also includes defaults for Redux Thunk, DevTools, and development-time Immutability Checks.

Code example

import { createSlice, configureStore, PayloadAction } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      // Immer Automatically converts direct mutation into an immutable copy
      state.value += 1;
    },
    addByAmount: (state, action: PayloadAction<number>) => {
      state.value += action.payload;
    }
  }
});

export const { increment, addByAmount } = counterSlice.actions;
export const store = configureStore({ reducer: { counter: counterSlice.reducer } });

Common mistakes

• Using the spread operator with Immer or mistakenly returning a new object while also mutating fields directly.

Follow-up questions

• What is Atomic State in libraries such as Jotai (and archived Recoil), and how does it compare with Redux's Single Store pattern?
• What is the essential difference between Server State and Client State, and when should you stop using Redux for both?

Sources

• Redux Toolkit docs — Getting Started