chainReducers
Creates a reducer that chains together a sequence of (sub-)reducers.
1
// JavaScript
2
3
function chainReducers(firstChildReducer, ...otherChildReducers)
Copied!
1
// TypeScript
2
3
function chainReducers<S = any, A extends Action = AnyAction>(
4
firstChildReducer: Reducer<S, A>,
5
...otherChildReducers: SubReducer<S, A>[]
6
): Reducer<S, A>
Copied!
Details
Given a sequence of (sub-)reducers,
chainReducers creates a reducer which forwards incoming actions to each of these "child" reducers. More specifically, the reducer:- 1.calls the first child reducer with the received state
- 2.passes the resulting state (and the same action) to the next reducer
- 3.repeats step 2 until reaching the last reducer, whose returned state is finally returned by the
chainReducersreducer.
Note that the first child reducer in the chain is the only one which needs to handle an
undefined state by returning the initial state; all others can be sub-reducers - such as the ones returned by onAction - which assume that they are only ever called with a defined, already-initialized state.Examples
Chaining
withInitialState and onAction reducers:1
import {
2
chainReducers,
3
onAction,
4
withInitialState
5
} from 'redux-preboiled'
6
7
const reducer = chainReducers(
8
withInitialState(0),
9
onAction('increment', state => state + 1),
10
onAction('multiply', (state, { payload }) => state * payload)
11
)
12
13
reducer(undefined, { type: '' })
14
// => 0
15
16
reducer(0, { type: 'increment' })
17
// => 1
18
19
reducer(2, { type: 'multiply', payload: 4 })
20
// => 8
Copied!
See Also
Last modified 7mo ago