← Lessons

quiz vs the machine

Gold1350

Frontend

The Redux Toolkit Patterns

How createSlice and Immer cut Redux boilerplate while keeping purity.

5 min read · core · beat Gold to climb

What it is

Redux Toolkit is the official, opinionated way to write Redux. It removes the hand written action types, action creators, and switch statements that made classic Redux verbose.

Key tools

  • configureStore: sets up the store with good defaults like the thunk middleware and dev tools.
  • createSlice: generates a reducer plus matching action creators from one definition.
  • createAsyncThunk: standardizes async logic with pending, fulfilled, and rejected cases.

The Immer trick

Inside a slice reducer you appear to mutate state directly, for example pushing to an array. Immer records those operations on a draft and produces a correct immutable update behind the scenes. You get readable code and still never mutate the real state.

  • Write mutating style code on the draft.
  • Immer returns a new immutable state.
  • Action creators are created for you.

Key idea

Redux Toolkit replaces boilerplate with createSlice and uses Immer so mutating style code safely produces immutable updates.

Check yourself

Answer to earn rating on the learn ladder.

1. What lets you write mutating style code inside a slice reducer?

2. What does createSlice generate besides a reducer?

3. Which helper standardizes async request lifecycle states?