你如何组织一个有超过 100 个 action 的 reducer？

Question

如果您的 reducer 中有超过 100 个操作导致您的文件包含超过 2k 行代码。您将如何构建项目的文件、状态和文件夹结构。

let state = {
    car: {
       [id]: { 
          // Data is shared between different components
          data: {
              name: "",
              model: "",
              color: ""
              msrp: 0,
              purchasePrice: 0
          },
          // Shared state that all components care about

          isSelected: false,
          currentDriver: '',

          // Special Component A State ( only Component A cares about these state updates
          isSaved: false,

          // Special Component B State ( only Component B cares about these state updates 

          hasTheCarBeenInAnAccident: false
       },
       ...

    }

}

这是一个可以扩展的示例，其中可能有更多组件针对该数据有自己的特殊状态更新

Answer 1

看这里：

https://redux.js.org/recipes/structuring-reducers/splitting-reducer-logic

从整体上考虑您的应用。将其划分为功能并创建不同的减速器。每个人将负责应用程序的另一部分。

您可以创建 reducers 文件夹并将每个 reducer 放入一个单独的文件中。之后 - 使用 combineReducers() 方法组合它们：

示例文件结构：

-src

--减速机

---dataFetchReducer.js

---shoppingCartReducer.js

---userAuthReducer.js

当谈到状态时 - 每个减速器都会有自己的 "piece" 状态，它将负责。最后合并之后，反正要合并成一个状态对象:)

Slice reducer: a reducer that is being used to handle updates to one specific slice of the state tree, usually done by passing it to combineReducers

你如何组织一个有超过 100 个 action 的 reducer？

How do you organize a reducer that has over 100 actions?

javascript

reactjs

redux

react-state-management