Write concise case reducers with direct assignments
Updating slice state
Redux Toolkit · Type Alias
Draft
Draft is the Immer-wrapped state received by Redux Toolkit case reducers. You can write mutation-style updates against it, while Immer generates the immutable state result.
How it works
Draft is the Immer-wrapped state value exposed to Redux Toolkit case reducers. A reducer may appear to mutate it directly; Immer records those changes and generates the immutable result returned by Redux Toolkit.
Syntax
Draft<State>Key points
- Redux Toolkit enables draft-based update syntax automatically in both createReducer and createSlice.
- Immer supplies the reducer callback with a draft representation of the current state.
- Assignments made to the draft are recorded rather than applied directly to the existing Redux state.
- Immer turns recorded draft changes into an immutable next-state result.
- Deeply nested objects and arrays can be updated using the same draft syntax.
- Redux Toolkit re-exports current for obtaining a plain copy of drafted data.
Common mistakes
- Mutation-style updates require the draft state to be an object or array; primitive state values cannot be changed this way.
- Nested structures are drafted too, so changing a nested object or array is supported.
Example: Using a draft state in a slice reducer
import { createSlice, type PayloadAction } from '@reduxjs/toolkit'
type State = { count: number }
const initialState: State = { count: 0 }
const counterSlice = createSlice({
name: 'counter',
initialState,
reducers: {
increment(state) {
state.count += 1
},
add(state, action: PayloadAction<number>) {
state.count += action.payload
},
},
})
console.log(counterSlice.reducer(initialState, counterSlice.actions.increment()))The reducer receives an Immer draft, so the case reducer can use mutation-style assignments while Redux Toolkit produces an immutable next state.
When to use it
Modify nested objects or arrays without manual copying
Changing nested data
Extract a readable snapshot from drafted data
Debugging reducer state
Interview questions
QHow does Redux Toolkit make mutating syntax safe in reducers?
Redux Toolkit uses Immer internally for createReducer and createSlice. The case reducer receives a draft, and Immer converts recorded draft mutations into an immutable updated state.
Follow-up: What must be true for mutation-style updates to work? The state must be an object or array; primitive state values do not expose mutable draft properties.
QWhat is a draft in an Immer-backed reducer?
A draft is a Proxy-wrapped version of the current state. Immer tracks attempted changes to that draft and creates the immutable result from those changes.
Follow-up: How can drafted data be inspected? Redux Toolkit re-exports Immer's current helper, which extracts a copy of the wrapped data.
QHow are nested state updates handled?
Nested objects and arrays are drafted recursively, so a reducer can update nested values directly. This avoids manually copying each level of the structure.
Follow-up: What if a reducer needs the pre-update value? Immer's original helper retrieves the original data without updates applied.
Related
createReducercreateSlicecurrentoriginalisDraftImmer