时间戳

首页 > 解决方案 > 我已经建立了一个带有上下文和钩子的全局状态还原模式。有没有办法组合减速器？

reactjs - 我已经建立了一个带有上下文和钩子的全局状态还原模式。有没有办法组合减速器？

问题描述

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

标签： reactjsreduxreducers

解决方案

不确定这是你要找的东西，但我使用了类似下面的东西来组合多个减速器。它实际上减少了减速器。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>
    </>
  );
}

推荐阅读