首页 文章

Redux Reducer复杂性问题

提问于
浏览 次
2

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

状态是复杂的，并且状态树的许多不同部分之间存在相互依赖性，因此组合减速器是不可能的，因为来自不同根减速器的孤立状态树不适用于该应用 .

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

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

我的问题是 - 是否有更好的通量实现来处理这种复杂程度，或者有没有办法使用不同于规范的Redux，并允许我更容易地管理这个动作/减少器复杂性？

谢谢

reactjs redux react-redux redux-thunk

2 回答

  • 3

    我建议在动作有效载荷中提供更多信息，并将较小的减速器与 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可以在动作有效负载中获取所需的所有信息，而不必共享部分状态 .

    回复于
  • 1

    虽然建议使用切片状态分割减速器，但您可以按照自己的方式拆分根减速器功能的内部逻辑 . 这包括按顺序运行多个“顶级”减速器功能 .

    我建议您阅读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 .

    回复于

相关问题