时间戳

首页 > 解决方案 > 你如何组织一个有 100 多个动作的 reducer？

javascript - 你如何组织一个有 100 多个动作的 reducer？

问题描述

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

    }

}

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

标签： javascriptreactjsreduxreact-state-management

解决方案

看看这里：

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

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

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

示例文件结构：

-src

--减速机

---dataFetchReducer.js

---shoppingCartReducer.js

---userAuthReducer.js

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

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

推荐阅读