I've built a global state provider context, and a reducer with the useReducer Hook. I'm realizing that combining multiple reducers like I would in redux is problematic. Is there a good way to do this? I have seen people importing combineReducers from redux itself, and that seems like it kind of defeats the point. Does anyone have any insight on this?
Not sure this is what you're looking for, but I have used something like below to combine multiple reducers. It actually reduces the reducers. Not actually like redux combineReducers
with key/value.
const reduceReducers = (...reducers) => (prevState, value, ...args) =>
reducers.reduce(
(newState, reducer) => reducer(newState, value, ...args),
prevState
);
I would be used like:
function reducerA(state, action) {
switch (action.type) {
case "increment":
return { ...state, count: state.count + 1 };
case "decrement":
return { ...state, count: state.count - 1 };
default:
return state;
}
}
function reducerB(state, action) {
switch (action.type) {
case "double":
return { ...state, count: state.count * 2 };
case "halve":
return { ...state, count: state.count / 2 };
default:
return state;
}
}
export default reduceReducers(reducerA, reducerB);
Then the Component:
import reducers from "./reducers";
function Counter({ initialState = { count: 1 } }) {
const [state, dispatch] = useReducer(reducers, initialState);
return (
<>
Count: {state.count}
<button onClick={() => dispatch({ type: "increment" })}>+</button>
<button onClick={() => dispatch({ type: "decrement" })}>-</button>
<button onClick={() => dispatch({ type: "double" })}>x2</button>
<button onClick={() => dispatch({ type: "halve" })}>/2</button>
</>
);
}