createReducer()

Definition

A utility that simplifies creating Redux reducer functions. It uses a 'builder callback' notation to define how the state updates in response to specific actions.

Explain Like I'm New

The manual way to write a reducer in RTK if you don't want to use `createSlice`. It replaces the ugly, legacy `switch` statements and gives you Immer's mutating capabilities.

Real World Example

Mostly used under the hood by `createSlice`, but occasionally used directly if you are migrating an older codebase to RTK piece by piece.

Common Use Cases

•Migrating legacy reducers
•Advanced reducer composition

Interactive Example

import { createAction, createReducer } from '@reduxjs/toolkit';

const increment = createAction('counter/increment');
const decrement = createAction('counter/decrement');

// Using the modern Builder syntax (Replaces the old switch statement!)
const counterReducer = createReducer(0, (builder) => {
  builder
    .addCase(increment, (state, action) => {
      return state + 1;
    })
    .addCase(decrement, (state, action) => {
      return state - 1;
    })
    .addDefaultCase((state, action) => {
      return state;
    });
});

Interview Questions

basic

Does `createReducer` use Immer for safe mutations just like `createSlice`?

intermediate

Why does RTK force you to use a `builder` callback instead of just a map object?

Flash Cards

Question

Use Immer?

Click to reveal answer

Answer

Yes. All RTK functions that create reducers wrap your code in Immer automatically.

Question

Why builder callback?

Click to reveal answer

Answer

It provides significantly better TypeScript support. The builder allows TS to perfectly infer the action payload types.