Compose slice reducers
Build a root reducer from independently managed application state slices.
Redux Toolkit · Function
combineReducers
combineReducers turns a map of slice reducers into one reducer that builds a matching state object. Redux Toolkit's configureStore performs this combination automatically when given an object of reducers.
How it works
combineReducers accepts an object whose values are slice reducer functions and returns one reducer. On every dispatched action, it calls each slice reducer for its corresponding state value, then assembles the returned values into a state object with matching keys.
Syntax
combineReducers(reducers)Parameters
| Name | Type | Description |
|---|---|---|
reducers | Object | An object whose property values are the reducer functions to combine. Each key becomes a corresponding state key. |
Returns
A reducer function that invokes the supplied reducers and constructs a state object with the same shape.
Key points
- Provide a reducer map and receive one root reducer suitable for a Redux store.
- The combined result is a plain state object assembled from each slice reducer's output.
- Separate reducers can independently own distinct portions of application state.
- The parameter is a reducer map: each property value must be a reducer function.
- State keys mirror the keys in the reducer map.
- With Redux Toolkit, an object supplied as configureStore's reducer option is combined automatically.
Common mistakes
- Every contained reducer runs for every dispatched action, so each slice reducer must safely ignore actions it does not handle.
Example: Combining slice reducers
import { combineReducers, configureStore } from '@reduxjs/toolkit'
const todos = (state = [], action) => state
const filter = (state = 'all', action) => state
const rootReducer = combineReducers({ todos, filter })
const store = configureStore({ reducer: rootReducer })
console.log(store.getState())Creates a root reducer from two slice reducers and uses it to configure a Redux Toolkit store.
When to use it
Compose nested state
Create a nested reducer structure by combining a subgroup before adding it to a parent map.
Manual root reducer construction
Construct a root reducer explicitly before passing it to store setup.
Interview questions
QWhat does combineReducers do?
It takes an object mapping state keys to slice reducers and returns a single reducer. The combined reducer invokes each slice reducer and produces a state object with the same keys.
Follow-up: How do you combine nested state? Call combineReducers for the nested group, then include that resulting reducer in the parent reducer map.
QHow are actions routed to slice reducers?
Each slice reducer receives its own current slice and the dispatched action. The returned values are assembled into the corresponding top-level state keys.
Follow-up: Can multiple slices respond to one action? Yes; every slice reducer is called for every dispatch, so several slices may update independently.
QWhen would you call combineReducers directly?
Redux Toolkit's configureStore automatically calls combineReducers when its reducer option is an object of slice reducers. Direct use is useful when constructing the root reducer explicitly.
Follow-up: What Redux Toolkit alternative supports lazy-loaded slices? combineSlices combines reducers and supports lazy slice injection.
Related
configureStorecreateSlicecombineSlices