onAction
Creates a sub-reducer for a particular action type.
1
// JavaScript
2
3
function onAction(type, getNextState?)
Copied!
1
// TypeScript
2
3
function onAction<
4
S = any,
5
T extends string | symbol | number = any,
6
A extends Action<T> = AnyAction
7
>(
8
type: T,
9
actionReducer: SubReducer<S, A>
10
): SubReducer<S>
11
12
function onAction<
13
S = any,
14
A extends Action = AnyAction
15
>(
16
actionCreator: TypedActionCreator<A>,
17
actionReducer: SubReducer<S, A>
18
): SubReducer<S>
Copied!
Details
createAction returns a sub-reducer that checks each incoming action's type against the one specified and, on a match, delegates to the passed reducer-like getNextState function. For non-matching actions, the sub-reducer simply returns the unchanged input state.The action type to match against can be specifed in two ways. The simplest way is to pass the action type value. Alternatively, you can pass an action creator generated by
createAction; in this case, the action creator's type property is used to determine the action type.Note that the function returned by onAction is a sub-reducer - rather than proper Redux reducer - because it does not provide an initial state. Instead, it expects to be embedded into a full reducer which takes care of state initialization. Such a reducer can be generated using
withInitialState and its subReducer parameter, or by combining withInitialState and chainReducers.TypeScript Notes
If you specify the action type using a
createAction action creator, the type of the getNextState function's action parameter will be automatically inferred from the type of the action creator.1
import { createAction, onAction } from 'redux-preboiled'
2
3
const multiply = createAction('multiply').withPayload<number>()
4
// multiply: PayloadActionCreator<number>
5
6
const multiplySubReducer = onAction('multiply', (state, action) => {
7
// action: PayloadAction<number, 'multiply'>
8
return state * action.payload
9
})
Copied!
Examples
Basic usage:
1
import { onAction } from 'redux-preboiled'
2
3
const subReducer = onAction(
4
'multiply',
5
(state, action) => state * action.payload
6
)
7
8
subReducer(2, { type: 'multiply', payload: 4 })
9
// => 8
10
11
subReducer(2, { type: 'increment' })
12
// => 2
Copied!
Specifying the action type with a
createAction action creator:1
import { createAction, onAction } from 'redux-preboiled'
2
3
const increment = createAction('increment')
4
const multiply = createAction('multiply').withPayload()
5
6
const subReducer = onAction(
7
multiply,
8
(state, action) => state * action.payload
9
)
10
11
subReducer(2, multiply(4))
12
// => 8
13
14
subReducer(2, increment())
15
// => 2
Copied!
See Also
Last modified 7mo ago
Copy link