Question

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

第一个选项：在教程中，我应该有1 / action INCREMENT和1 DECREMENT。在减速器中它会++或--。

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

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


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

还是另一种方式？

Answer 1

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

在“ src ”目录中设置文件夹“操作”，其中 App.js 和索引.js 位于。在actions文件夹中，创建两个文件，1- actionTypes.js 和2- actionCreators.js 。
在actionTypes.js文件中将您的操作类型定义为常量，以便不会错误地更改其值并从那里导出。
在actionCreators.js中，导入您的操作类型，并使用它们定义您的操作创建者。

src

，创建另一个名为 redux / store / redurs 的文件夹。任何名称都可以。然后在其中创建一个文件 reducers.js 。在那里定义你的减速器。和导入动作类型。制作一个switch-case块来检查动作类型并定义相应的代码来执行即++或 - 。

DO-NOT 将有效负载发送为-1或+1。这可行，但是做法很糟糕。

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

Answer 2

这取决于您如何看待您的架构应该构建。两种方式都很好，第一种方式更能反映您应用中发生的真实事件（例如点击＆＃34; +＆＃34;按钮接近输入，应触发＆＃34; INCREMENT＆＃34;操作，然后点击＆＃34; - ＆＃34;，应触发＆＃34; DECREMENT＆＃34;），因此在这种情况下，商店包含更多逻辑，因为他们直接知道如何反映UI中发生的事件。

在使用第二个选项的情况下，首先，它应该有一个不同的名称（类似于＆＃34; CHANGED＆＃34;），因为您希望能够在这里减少或增加。在这种情况下，商店和UI事件之间的连接较弱，一些逻辑存储在操作类型本身（在这种情况下 - 应该更改多少值）。

存储和缩减器的逻辑越多越好，因为Reducer是纯粹的，允许对它们进行写入测试更容易。

我应该如何组织我的actionType与Redux随着时间的推移和dev？

2 个答案: