Redux Toolkit

Redux Toolkit

Redux Toolkit (RTK) is the official, recommended way to write Redux logic today.

It was created by the Redux team to address the three most common complaints about “Vanilla” Redux:

1. “Configuring a Redux store is too complicated.”
2. “I have to add a lot of packages to get Redux to do anything useful (Thunk, Reselect, Immer).”
3. “Redux requires too much boilerplate code.”

Core Features of RTK

Redux Toolkit wraps the core Redux library and provides several utility functions that drastically simplify the developer experience.

1. configureStore

Sets up a Redux store with a single function call. It automatically enables the Redux DevTools extension and adds redux-thunk middleware (for async logic) out of the box, saving you from complex configuration files.

2. createSlice (The Game Changer)

In Vanilla Redux, you had to define Action Types (constants), Action Creators (functions), and Reducers (switch statements) in separate files.

createSlice combines all of these into one simple function. It automatically generates action creators and action types that correspond to the reducers and state.

3. Immer Integration (Mutable syntax)

Writing immutable update logic in Vanilla Redux was notoriously difficult (using nested object spreads like ...state, nested: { ...state.nested, value: newValue }).

RTK uses a library called Immer under the hood. Immer allows you to write code that looks like it is mutating the state directly (state.value = newValue), but it intercepts those mutations and safely produces a brand new, immutable state object for you.

Example: A Counter with RTK

import { configureStore, createSlice } from '@reduxjs/toolkit';
import { Provider, useSelector, useDispatch } from 'react-redux';

// 1. Create a Slice (State + Reducers + Actions all in one!)
const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      // Look! We are "mutating" state directly! Immer handles the immutability.
      state.value += 1; 
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    },
  },
});

// RTK automatically generated the action creators for us
export const { increment, decrement, incrementByAmount } = counterSlice.actions;

// 2. Configure the Store
const store = configureStore({
  reducer: {
    counter: counterSlice.reducer,
  },
});

// 3. Use it in a Component
function CounterApp() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

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

RTK Query

Redux Toolkit also includes an optional data fetching and caching tool called RTK Query.

If your application relies heavily on Redux but you need to manage Server State (API calls), RTK Query provides a solution comparable to React Query, but deeply integrated into the Redux ecosystem.

Interview Questions

Q: How does Redux Toolkit (RTK) improve upon legacy Redux?
A: RTK drastically reduces boilerplate. It provides configureStore for instant setup with Redux Thunk built-in, and it uses createSlice which leverages Immer.js under the hood. Immer allows developers to write code that looks like it’s mutating state directly (e.g., state.user.name = 'Bob'), while safely handling the immutable cloning behind the scenes.