Stop 09 · State ManagementTopics · 2/7

Redux Toolkit

In short

Redux is common in company codebases, and Redux Toolkit (RTK) is the official, much shorter way to write it. Knowing it makes those projects feel familiar on day one.

The official, modern way to write Redux — reducing boilerplate with `createSlice`, `configureStore` and built-in Immer for 'mutating' state safely.

The jaadu mascot hands a slip through a bank window to a cashier writing in a thick ledger.

Think of it like this

A bank and its ledger

You can't walk in and edit the bank's ledger yourself. You fill a slip saying what you want (an action), the cashier follows fixed rules to update the ledger (a reducer), and the ledger is the one true record (the store).

Watch it happen

One action through the store

Button

Store

cart slice

CartBadge

dispatch(addItem("Pen"))

1/5The button dispatches { type: "cart/addItem", payload: "Pen" }.

The big ideas

What you need to know

One store

configureStore creates a single store for your global state and sets up Redux DevTools support for you.

Slices

createSlice bundles one piece of state, its reducers and auto-generated action creators in one place.

'Mutating' code is safe here

Inside a slice, state.count += 1 is fine. RTK uses a library called Immer to turn it into an immutable update.

Hooks to read and write

useSelector reads a piece of state, and useDispatch gives you dispatch to send actions.

See it in code

Walk through the code

1import { configureStore, createSlice, type PayloadAction } from "@reduxjs/toolkit";2 3const cartSlice = createSlice({4  name: "cart",5  initialState: { items: [] as string[] },6  reducers: {7    addItem: (state, action: PayloadAction<string>) => {8      state.items.push(action.payload); // Immer makes this safe9    },10    clear: (state) => { state.items = []; },11  },12});13 14export const { addItem, clear } = cartSlice.actions;15export const store = configureStore({ reducer: { cart: cartSlice.reducer } });16export type RootState = ReturnType<typeof store.getState>;

1/4A slice has a name and a starting state. The name prefixes its action types.

Wrap your app in <Provider store={store}> from react-redux. Then useSelector((s: RootState) => s.cart.items) reads the cart, and dispatch(addItem("Pen")) updates it.

Save yourself the pain

Common mistakes

Oops

Writing old-style Redux with switch statements, action type constants and createStore.

Do this instead

Use configureStore and createSlice. They remove most of the boilerplate and are what the Redux docs recommend.

Oops

Changing state and also returning a new value from the same slice reducer.

Do this instead

Do one or the other: change state directly, or return a new state. Immer throws an error if you do both.

Your mission

Move a counter into Redux

~30 min

Quick check

Inside a createSlice reducer you write state.count += 1. What happens?

Go deeper

1Build a simple slice (e.g. a cart) with `createSlice` and connect it to a component.
2Learn `createAsyncThunk` for handling async actions like API calls.
3Understand why Redux Toolkit replaced writing Redux 'by hand' for most teams.