我应该如何使用 Redux 组织我的 actionType，以便随着时间的推移和开发可以维护？答案

【问题标题】：How should I organize my actionType with Redux to be maintainable over time and dev?我应该如何使用 Redux 组织我的 actionType，以便随着时间的推移和开发可以维护？
【发布时间】：2018-03-27 12:21:56
【问题描述】：

我正在为一个项目使用 redux。我以"increment/decrement a counter" basic tutorial 为例。我想知道应该如何组织我的动作类型，以便能够在现实生活中维护和扩展我的应用程序。

第一个选项：与教程中一样，我应该有 1 个动作 INCREMENT 和一个 DECREMENT。而在减速器中，它将是++ 或--。

第二个选项我应该只有一个 ActionType 并在有效负载中传递增量。 store.dispatch({ action: "INCREMENT", payload: { increment: -1 } })。我可以有 2 个动作

export const decrementCounter = () => {
    store.dispatch({ action: "INCREMENT", payload: { increment: -1 } })
}; 


export const decrementCounter = () => {
  store.dispatch({action: "INCREMENT", payload: {increment: -1}})
}

或者其他方式？

【问题讨论】：

标签： reactjs redux maintainability

【解决方案1】：

我假设您使用 create-react-app 来创建您的项目。

在“src”目录中创建一个文件夹“actions”，您的 App.js 和 Index .js 位于。在操作文件夹中创建两个文件，1- actionTypes.js 和 2- actionCreators.js 。
在 actionTypes.js 文件中将动作类型定义为 constants，这样它们的值就不会被错误地更改并从那里导出。 p>
在 actionCreators.js 中，导入您的动作类型并使用它们定义您的动作创建者。
在 src 文件夹中，创建另一个名为 redux/store/reducers 的文件夹。任何名称都可以。然后在其中创建一个文件 reducers.js 。在那里定义你的减速器。并导入动作类型。制作一个 switch-case 块来检查动作类型并定义相应的代码来执行，即 ++ 或 -- 。

请勿将有效负载作为 -1 或 +1 发送。这可以工作，但这是一种不好的做法。

做检查 redux 文档。他们有很棒的文档。

【讨论】：

【解决方案2】：

这取决于您如何看待您的架构应该如何构建。两种方式都很好，第一种更反映了你的应用中发生的真实事件（比如点击输入附近的“+”按钮，应该触发“INCREMENT”动作，点击“-”，应该触发“DECREMENT”），所以在这种情况下，store 包含更多的逻辑，因为它们直接知道如何反映 UI 中发生的事件。

在使用第二个选项的情况下，首先，它应该有一个不同的名称（类似于“CHANGED”），因为您期望两者都能够在此处减少或增加。在这种情况下，stores 和 UI 事件之间的联系较弱，并且一些逻辑存储在 action 类型本身中（在这种情况下 - 应该改变多少值）。

留给存储和 reducer 的逻辑越多越好，因为 reducer 是纯粹的，这使得为它们编写测试变得更容易。

【讨论】：