Reduce notification overhead
A slice has several related updates that can notify subscribers together instead of after every low-priority dispatch.
Redux Toolkit · Function
prepareAutoBatched
prepareAutoBatched creates a typed createSlice prepare callback that marks an action for automatic batching. The enhancer uses that marker to delay subscriber notifications for low-priority actions.
How it works
prepareAutoBatched<T>() produces a slice prepare callback that accepts a typed payload and returns the payload plus the metadata required by autoBatchEnhancer, allowing subscriber notifications for consecutive low-priority actions to be delayed.
Syntax
prepareAutoBatched<T>() => (payload: T) => { payload: T; meta: unknown }Parameters
| Name | Type | Description |
|---|---|---|
payload | T | The action payload passed to the generated prepare callback; its type is the generic T. |
Returns
A prepare callback of type (payload: T) => { payload: T; meta: unknown }; its result contains the payload and metadata marking the action for automatic batching.
Key points
- The factory returns a payload-preparation callback whose result contains the original payload and an autobatch marker.
- Its generic type lets the payload callback accept a specific application type.
- The intended integration point is a reducer definition's
preparecallback. - The marker affects subscriber notification timing rather than the reducer's state-transition logic.
- One notification trigger is execution of the enhancer's queued callback.
- A normal-priority dispatch in the same tick is the other notification trigger.
Common mistakes
- Use it as the
preparecallback in acreateSlicereducer definition; it is not itself a reducer or action creator. - The action is treated as low priority only because the returned metadata carries the autobatch marker.
Example: Mark a slice action for automatic batching
import { createSlice, type PayloadAction } from '@reduxjs/toolkit'
import { prepareAutoBatched } from '@reduxjs/toolkit'
type Todo = { id: number; text: string }
const todos = createSlice({
name: 'todos',
initialState: [] as Todo[],
reducers: {
added: {
reducer(state, action: PayloadAction<Todo>) {
state.push(action.payload)
},
prepare: prepareAutoBatched<Todo>(),
},
},
})
todos.actions.added({ id: 1, text: 'Learn Redux Toolkit' })Use the returned prepare callback in a slice reducer definition to tag its payload action for automatic batching.
When to use it
Type-safe batched slice actions
A reducer needs a typed payload while opting its generated action into the store's autobatching behavior.
Group consecutive updates
An application dispatches multiple low-priority actions during one synchronous sequence and wants the enhancer to defer notifications.
Interview questions
QWhat does prepareAutoBatched return?
It is a generic factory: calling prepareAutoBatched<T>() returns a callback of type (payload: T) => { payload: T; meta: unknown }. The callback creates the metadata marker that the autobatch enhancer recognizes.
Follow-up: What happens to subscribers? The enhancer delays notifications until its queued callback runs or a normal-priority action is dispatched in the same tick.
QHow is it used with createSlice?
Place the returned callback in a slice reducer's prepare property, alongside the reducer implementation. The resulting action carries the payload and autobatching metadata.
Follow-up: How would you customize the scheduling? Configure autoBatchEnhancer through store enhancers, such as with a tick, timer, or custom callback strategy.
QWhat does automatic batching mean here?
It does not batch state updates or merge actions. It labels actions as low priority so autoBatchEnhancer can delay subscriber notifications while those actions are dispatched consecutively.
Follow-up: What ends the delay immediately? Dispatching a normal-priority action in the same tick causes notification before the queued callback runs.
Related
autoBatchEnhancerSHOULD_AUTOBATCHcreateSlicePayloadAction