我应该如何使用 Redux 组织我的 actionType 以随着时间的推移和开发进行维护？

Question

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

第一个选项：在教程中，我应该有 1/ action 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}})
}

或者其他方式？

Answer 1

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

中发生的事件。

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

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

Answer 2

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

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

DO-NOT 将负载作为 -1 或 +1 发送。可以工作但是是一种不好的做法。

DO 查看 redux 文档。他们有很棒的文档。

我应该如何使用 Redux 组织我的 actionType 以随着时间的推移和开发进行维护？

How should I organize my actionType with Redux to be maintainable over time and dev?

reactjs

redux

maintainability