React reducer idea
In react you can dispatch one action at the time with the
useReducer
dispatch function.
This is a bit annoying to me if I have several actions that I want to
operate on the same original state.
Therefore I have created a custom
useReducer
function that
collects all actions passed to it like
dispatch(action1, action2, action3)
It's pretty straight forward to create the new dispatch function like
import { useReducer, useCallback } from "react";
const useMultipleActionReducer = (reducer, initialState) => {
const [state, dispatch] = useReducer(reducer, initialState);
// Wrap in useCallback to avoid rerenders
const multipleActionDispatch = useCallback((...actions) => {
// Pass all actions as an array
return dispatch(actions);
}, [dispatch]);
return [state, multipleActionDispatch];
}
Then next step is to create a reducer function that can handle multiple arguments.
It's not that complicated.
const reducer = (state, actions) => actions.reduce(actionSwitch, state)
Now you can handle the actions the same way as you would normally do with something like:
const actionSwitch = (state, action) => {
switch (action.type) {
case 'increment': {
return { ...state, count: state.count + 1 };
}
case 'decrement': {
return { ...state, count: state.count - 1 };
}
default: {
return state;
}
}
}
Usage
const [state, dispatch] = useMultipleActionReducer(reducer, { count: 0 });
// count + 1 + 1 - 1
dispatch({ type: 'increment' }, { type: 'increment' }, { type: 'decrement' });