Question

我目前正在用javascript重写一个大型桌面应用程序 - 特别是使用React / Redux。不同行动的数量反映了州可能需要改变的不同方式的数量。目前，此应用程序中有350多个操作。

状态很复杂，并且状态树的许多不同部分之间存在相互依赖关系，因此不可能组合reducers，因为来自不同根减少器的隔离状态树不适用于此应用程序。

因此，我有一个主要的reducer，带有一个switch语句，包含350多个案例。对于每种情况，我都必须挑选所需的全部状态，并将其明确地传递给儿童减速器。大多数情况下，这种儿童减速器（本身处理大量动作类型）交给各种孙子减速器等等。目前我的减速树有5个深处。

为了增加更多的复杂性，我的操作中有近30％是异步的，所以我使用redux-thunk来处理这些 - 这在这种情况下很难正确。

我的问题是 - 是否有更好的通量实现来处理这种复杂程度，或者是否有一种方法可以使用与常规不同的Redux，并允许我更轻松地管理此操作/减少器复杂性？

由于

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

这样你的减速器就可以在动作有效载荷中获得所需的所有信息，而不必共享部分状态。

Answer 2

虽然建议的方法是将削减器按片段分割，但您可以按照自己的方式拆分根削减器功能的内部逻辑。这包括运行多个＆＃34;顶级＆＃34;减速器按顺序运行。

我鼓励您阅读Redux docs section on "Structuring Reducers"，其中提供了拆分缩减器逻辑的不同方法的示例。请特别注意Normalizing State Shape，Beyond combineReducers和Reusing Reducer Logic上的主题。

我的"Practical Redux"教程系列还演示了组织特定于功能的缩减器逻辑的其他方法。请特别注意Practical Redux, Part 7: Form Change Handling, Data Editing, and Feature Reducers。

Redux Reducer复杂性问题

2 个答案: