Handle createAsyncThunk lifecycle actions
A thunk dispatches pending, fulfilled, and rejected actions that a slice must use to track loading or errors.
Redux Toolkit · Function
extraReducers
extraReducers lets a Redux Toolkit slice respond to actions defined outside its own reducers field. It registers handlers without generating additional action creators or action types.
- Since
- 2.0
How it works
extraReducers lets a slice handle action types defined elsewhere. Its builder callback registers case reducers, matchers, or a fallback handler; these reducers use Immer-style updates, but unlike entries in reducers, they do not create actions or action types.
Syntax
extraReducers?: (builder: ActionReducerMapBuilder<State>) => voidParameters
| Name | Type | Description |
|---|---|---|
extraReducers | (builder: ActionReducerMapBuilder<State>) => void | Callback receiving an ActionReducerMapBuilder<State> used to register case reducers, matchers, and a default handler. |
Returns
No standalone return value; it is a createSlice configuration option that contributes reducer cases.
Key points
- A slice can update its state for actions created by other slices, thunks, or application code.
- External-action handlers are consumers of actions, not producers of new action creators.
- Handlers may use concise draft mutations such as assigning a field or pushing into an array.
- The current API uses a callback that receives the builder used to register handlers.
- The builder supports case-specific handlers, predicate-based matchers, and a default handler.
- Action ownership does not restrict which slices can listen for a dispatched action.
Common mistakes
- When a generated reducer and an extra reducer target the same action type, the reducer from
reducerswins. - Multiple matching handlers can run sequentially, following their declaration order.
Example: Respond to an external action
import { createAction, createSlice } from '@reduxjs/toolkit'
const loggedOut = createAction('auth/loggedOut')
const sessionSlice = createSlice({
name: 'session',
initialState: { userId: 'u1' as string | null },
reducers: {},
extraReducers: (builder) => {
builder.addCase(loggedOut, (state) => {
state.userId = null
})
},
})
export default sessionSlice.reducerThe slice updates its state when an action created outside its own reducers is dispatched.
When to use it
React to another slice's action
One domain event should clear or update state held by several independent slices.
Handle RTK Query matchers
A slice needs to synchronize state with an RTK Query endpoint result.
Interview questions
QWhat problem does extraReducers solve?
extraReducers registers reducer logic for actions that the slice did not generate itself. It is commonly used for actions from another slice, createAsyncThunk, or other external action creators.
Follow-up: How can a slice respond to an RTK Query result? Register an endpoint matcher such as api.endpoints.login.matchFulfilled with builder.addMatcher.
QHow is extraReducers configured?
The builder callback receives an ActionReducerMapBuilder and can call methods such as addCase, addMatcher, and addDefaultCase. These methods associate external actions or matching predicates with state update logic.
Follow-up: Why is the builder form preferred in modern RTK? RTK 2.0 removed the object form and the builder form provides better TypeScript support.
QHow does extraReducers differ from reducers?
Case reducers in extraReducers are wrapped in Immer, so they may use mutating syntax that safely updates draft state. They do not generate action creators or action types, unlike case reducers declared in reducers.
Follow-up: What happens on an action-type collision? The matching case reducer from reducers handles the action instead of the extraReducers case.
Related
createSlicecreateReducercreateActioncreateAsyncThunkActionReducerMapBuilderbuilder.addCasebuilder.addMatcherbuilder.addDefaultCase