reactjs - 我已经构建了一个具有上下文和钩子(Hook)的全局状态 redux 类似模式。有没有办法组合 reducer ？

Question

我已经构建了一个全局状态提供程序上下文，以及一个带有 useReducer Hook 的 reducer 。我意识到像在 redux 中那样组合多个 reducer 是有问题的。有没有好的方法可以做到这一点？我见过有人从 redux 本身导入combineReducers，这似乎有点违背了这一点。有人对此有任何见解吗？

Answer 1

不确定这就是您要寻找的，但我使用了如下所示的方法来组合多个 reducer 。它实际上减少了 reducer 。实际上不像 redux 与键/值结合combineReducers。

const reduceReducers = (...reducers) => (prevState, value, ...args) =>
  reducers.reduce(
    (newState, reducer) => reducer(newState, value, ...args),
    prevState
  );

我会被这样使用:

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);

然后是组件:

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>
    </>
  );
}