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

Question

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

• 第一个选项：在教程中，我应该有1个/动作INCREMENT和一个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'目录中创建一个文件夹'actions'，您的App.js和Index.js位于该目录中。在actions文件夹中创建两个文件，1- actionTypes.js和2- actionCreators.js。
• 在actionTypes.js文件中将操作类型定义为常量，以便不会错误地更改它们的值并从那里导出它们。
• 在actionCreators.js中，导入您的操作类型并使用它们定义您的操作创建者。
• 在src文件夹中，创建另一个名为redux / store / reducers的文件夹。任何名字都可以。然后在其中创建一个文件reducers.js。在那里定义你的减速器。和导入动作类型。制作一个switch-case块来检查动作类型并定义相应的代码来执行即++或 - 。

DO-NOT将有效载荷发送为-1或+1。这可行，但是不好的做法。

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

Answer 2

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

在使用第二个选项的情况下，首先，它应该具有不同的名称（类似于“已更改”），因为您希望能够在此处递减或递增。在这种情况下，存储和UI事件之间的连接较弱，并且一些逻辑存储在操作类型本身中（在这种情况下 - 应该更改多少值）。

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