我已经构建了一个全局状态 redux，类似于带有上下文和钩子的模式。有没有办法组合减速器？

Question

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

Answer 1

不确定这是否是您要查找的内容，但我使用了如下所示的内容来组合多个减速器。它实际上减少了减速器。实际上并不像combineReducers带有键/值的redux 。

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