Convenient immutable updates
Updating nested objects or arrays without manually copying each level.
Redux Toolkit · Function
createNextState
createNextState is Redux Toolkit’s re-export of Immer’s default immutable update function, also known as produce. It lets a recipe describe changes against a draft while preserving immutable state updates.
How it works
createNextState is Redux Toolkit’s re-export of Immer’s default immutable update function. It accepts an existing state and a producer callback, letting the callback mutate a draft while returning a new immutable state.
Syntax
createNextState(baseState, recipe)Parameters
| Name | Type | Description |
|---|---|---|
baseState | State | The current state value to update immutably. |
recipe | (draft: Draft<State>) => void | State | A recipe callback that receives a draft representation of the state and describes the update. |
Returns
A new immutable state value derived from the supplied state and recipe.
Key points
- It performs immutable state updates using Immer’s draft-based update model.
- Redux Toolkit makes the helper available under the createNextState name.
- The same helper is commonly identified by Immer’s produce name.
Common mistakes
- This is an Immer re-export, so its behavior follows Immer rather than being a Redux-specific state-update primitive.
Example: Create an immutable next state
import { createNextState } from '@reduxjs/toolkit'
const baseState = { todos: [] as string[] }
const nextState = createNextState(baseState, draft => {
draft.todos.push('Learn Redux Toolkit')
})
console.log(baseState.todos) // []
console.log(nextState.todos) // ['Learn Redux Toolkit']The producer can update a draft with normal mutation syntax while the original state remains unchanged.
When to use it
Redux Toolkit integration
Sharing an Immer-based update helper through Redux Toolkit’s public exports.
Reusable state recipes
Writing standalone state transformations outside a reducer.
Interview questions
QWhat is createNextState?
createNextState is the default immutable update function from Immer, exposed by Redux Toolkit under that name. It allows updates to be expressed through draft mutations while producing an immutable result.
Follow-up: Why might a project use this export instead of importing Immer directly? It can use Redux Toolkit’s public export surface and avoid adding a separate direct import for this helper.
QHow does createNextState express immutable updates?
The function receives the current state and a recipe callback. The callback works against a draft, and the function returns the resulting next state without mutating the original value.
Follow-up: What should the recipe do when no change is needed? It can leave the draft untouched, producing a state equivalent to the input according to Immer’s behavior.
QWhat is the relationship between createNextState and produce?
Redux Toolkit re-exports the Immer function as createNextState, and the same function is also commonly known as produce. The names refer to the same underlying immutable-update helper.
Follow-up: Where else is this pattern used in Redux Toolkit? Reducers created by Redux Toolkit commonly use Immer-powered draft updates, although this page specifically documents the standalone export.
Related
produceImmercreateSlice