Redux Reducer 复杂性问题

Question

我目前正在 javascript 中重新编写一个大型桌面应用程序 - 具体来说，使用 React / Redux。不同 Actions 的数量反映了状态可能需要改变的不同方式的数量。目前，此应用程序中有超过 350 个操作。

状态很复杂，状态树的许多不同部分相互依赖，因此无法组合缩减器，因为来自不同根缩减器的孤立状态树不适用于此应用程序。

因此我有一个主要的减速器，带有一个用于操作的 switch 语句 - 由超过 350 个案例组成。对于每种情况，我都必须挑选出所需的整体状态，并将其明确传递给子减速器。大多数情况下，这个子减速器（本身处理大量的动作类型）交给各种孙减速器等等。目前我的 reducer 树有 5 层深。

更复杂的是，我将近 30% 的操作是异步的，所以我使用 redux-thunk 来处理这些 - 这在这种情况下很难正确处理。

我的问题是 - 是否有更好的 flux 实现来处理这种级别的复杂性，或者是否有使用不同于常规的 Redux 的方法，并允许我更多地管理这种 action/reducer 复杂性容易吗？

谢谢

Answer 1

与其让一个大型 reducer 共享状态，我建议在操作有效载荷中提供更多信息，并将较小的 reducer 与 combineReducers 组合。您可以使用 redux-thunk 和 getState 函数参数来执行此操作。

  function action(id) {
    return (dispatch, getState) => {
      const value = getState().ui.form.value; // read part of state tree
      dispatch({ type: 'ACTION', payload: { id, value } });
    }
  }

通过这种方式，您的 reducer 可以在操作有效负载中获得它们所需的所有信息，而不必共享部分状态。

Answer 2

虽然按状态切片划分 reducer 是推荐的方法，但您可以根据需要以任何方式拆分根 reducer 函数的内部逻辑。这包括运行多个 "top-level" reducer 函数的顺序。

我鼓励您阅读 Redux docs section on "Structuring Reducers", which gives examples of different ways to split up your reducer logic. In particular, see the topics on Normalizing State Shape, Beyond combineReducers, and Reusing Reducer Logic。

我的"Practical Redux" tutorial series also demonstrates other ways to organize feature-specific reducer logic. In particular, see Practical Redux, Part 7: Form Change Handling, Data Editing, and Feature Reducers.

Redux Reducer 复杂性问题

Redux Reducer Complexity Issue

reactjs

redux

redux-thunk

react-redux