Extract complex case reducers
A slice has many reducers and inline definitions make the createSlice call hard to read.
Redux Toolkit · Type Alias
CaseReducer
CaseReducer is a TypeScript function type for describing a reducer that handles a particular state and action shape. Define one outside createSlice when inline reducers become difficult to manage or when reuse is useful.
How it works
CaseReducer is a TypeScript type for a reducer function that handles one action shape. It lets you define reusable case reducers outside createSlice and type their state and action explicitly.
Syntax
CaseReducer<State, Action>Parameters
| Name | Type | Description |
|---|---|---|
state | State | The current state value handled by the case reducer; its type is supplied by the first generic parameter. |
action | Action | The dispatched action handled by the case reducer; its type is supplied by the second generic parameter. |
Returns
The next state value, or an Immer-compatible case-reducer result when used through Redux Toolkit reducer APIs.
Key points
- Use CaseReducer to give a separately declared reducer an explicit state-and-action function type.
- The state generic can represent a primitive or any application-specific state shape.
- The action generic can be a PayloadAction carrying a payload type.
- A CaseReducer value is implemented as a function receiving state and action.
- The reducer can calculate and return a new state value from the current state and action payload.
Common mistakes
- Use a separately declared CaseReducer when inline reducer definitions become unwieldy.
Example: Typing a reusable case reducer
import type { CaseReducer, PayloadAction } from '@reduxjs/toolkit'
type State = number
const increment: CaseReducer<State, PayloadAction<number>> = (state, action) =>
state + action.payload
console.log(increment(1, { type: 'increment', payload: 2 }))A typed case reducer receives the current state and an action, then returns the next state.
When to use it
Reuse reducer logic
The same state transition belongs to multiple slices or reducer definitions.
Add precise TypeScript types
A reducer needs explicit state and payload typing outside a slice declaration.
Interview questions
QWhat is CaseReducer used for?
CaseReducer is a TypeScript type used to describe an individual reducer function. It is useful when a case reducer is declared outside createSlice, especially when the reducer should be reused or separately typed.
Follow-up: Why can a separately declared case reducer be preferable to an inline one? It keeps large slice definitions easier to read and allows the reducer to be reused across slices.
QHow do you type a CaseReducer?
The state type is supplied as the first generic argument, and the action type is supplied as the second. The reducer then receives state and action with those types.
Follow-up: How can action typing be inferred in builder.addMatcher? Use a type-predicate matcher, which narrows the action argument for the reducer callback.
QHow does a case reducer relate to Redux Toolkit reducers?
A case reducer handles one action shape and calculates the next state. In Redux Toolkit, case reducers are used by APIs such as createSlice and createReducer.
Follow-up: What makes Redux Toolkit reducer code appear mutable? createSlice and createReducer use Immer internally, allowing draft updates that produce immutable state.
Related
createSlicecreateReducerPayloadActionActionReducerMapBuilderbuilder.addMatcher