Read current reducer draft state
A selector is called from createReducer or createSlice logic that receives an Immer draft.
Redux Toolkit · Function
createDraftSafeSelector
createDraftSafeSelector is Redux Toolkit’s draft-aware version of createSelector. It preserves normal memoization for plain state but recalculates for Immer drafts to avoid stale results.
- Since
- 2.1 (pre-typed version via withTypes)
How it works
createDraftSafeSelector wraps createSelector for use with Immer-powered mutable logic. It memoizes normally for ordinary state, but detects draft values and recalculates so reads reflect current draft changes instead of stale cached results.
Syntax
createDraftSafeSelector(...inputSelectors, resultFunc)Parameters
| Name | Type | Description |
|---|---|---|
...inputSelectorsAndResultFunc | Function arguments | Input selectors and a final result-function, using the same selector construction pattern as createSelector. |
Returns
A memoized selector that safely handles both ordinary state values and Immer draft values.
Key points
- The function is exported by Redux Toolkit as a wrapped form of createSelector.
- Its primary purpose is selector use inside reducers powered by Immer's mutable-style logic.
- Plain, non-draft state retains normal input-based memoization.
- Entity-adapter-generated selectors already use draft-safe behavior by default.
- Draft detection triggers recalculation so the selector observes updated draft contents.
- RTK 2.1 adds support for defining a pre-typed selector with state type information.
Common mistakes
- Draft inputs may cause recalculation rather than reuse of a cached result; this favors correctness over memoization.
Example: Draft-safe selector
import { createDraftSafeSelector } from '@reduxjs/toolkit'
type State = { value: number }
const selectSelf = (state: State) => state
const selectValue = createDraftSafeSelector(
selectSelf,
(state) => state.value,
)
console.log(selectValue({ value: 2 }))Creates and runs a selector that can safely read either ordinary state or an Immer draft.
When to use it
Share selectors across plain and draft state
A selector must work both in ordinary application code and during Immer-based updates.
Customize selector memoization
A project needs a custom memoization implementation while retaining draft detection.
Create a pre-typed selector factory
TypeScript selectors repeatedly use the same root state type.
Interview questions
QWhat problem does createDraftSafeSelector solve?
It is Redux Toolkit's draft-safe wrapper around createSelector. With ordinary state it memoizes normally, while with an Immer draft it recalculates to avoid returning a stale cached value.
Follow-up: How can a project use a different memoization strategy? Use createDraftSafeSelectorCreator with a memoizer such as weakMapMemoize.
QWhy can a regular createSelector be unsafe inside an Immer reducer?
An ordinary memoized selector can see the same draft object identity before and after a draft mutation and therefore return an old result. The draft-safe version detects the Immer draft and computes from the current value.
Follow-up: What happens when the selector receives plain state? It keeps normal memoization behavior based on its inputs.
QHow do you customize or pre-type draft-safe selectors?
Redux Toolkit exports createDraftSafeSelectorCreator as the draft-safe counterpart to createSelectorCreator. It accepts a memoization function and returns a customized draft-safe selector creator.
Follow-up: How can TypeScript state be built into the creator? In RTK 2.1 and later, call createDraftSafeSelector.withTypes<RootState>().
Related
createSelectorcreateSelectorCreatorcreateDraftSafeSelectorCreatorentityAdapter.getSelectorsweakMapMemoize