你如何组织一个有 100 多个动作的 reducer？ [关闭]答案

【问题标题】：How do you organize a reducer that has over 100 actions? [closed]你如何组织一个有 100 多个动作的 reducer？ [关闭]
【发布时间】：2020-08-28 19:02:36
【问题描述】：

如果您的 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
       },
       ...

    }

}

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

【问题讨论】：

也许你应该重新考虑如何管理你的状态（我应该把什么放在哪里？我应该以哪种方式分割）？如果没有任何上下文或代码，很难说出您可以做出哪些简单的改进。
@sandrooco 我更新了它。对此感到抱歉。
没有什么值得你后悔的。 :) 我认为提供的解决方案提供了相当多的指导。

标签： javascript reactjs redux react-state-management

【解决方案1】：

看这里：

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

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

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

示例文件结构：

-src

--减速器

---dataFetchReducer.js

---shoppingCartReducer.js

---userAuthReducer.js

当涉及到状态时 - 每个减速器都有自己的“部分”状态，它会负责。最后，在合并之后，无论如何它都会合并为一个状态对象:)

Slice reducer：一种用于处理状态树特定切片更新的reducer，通常通过将其传递给 combineReducers 来完成

【讨论】：

我添加了更多示例来解释我的意思