在 Redux 操作中将数据放入“有效负载”键有什么好处？答案

【问题标题】：What are the advantages of putting data inside a "payload" key in a Redux action?在 Redux 操作中将数据放入“有效负载”键有什么好处？
【发布时间】：2017-09-27 07:23:35
【问题描述】：

我在任何地方都没有找到一个好的答案，这似乎是一个毫无意义的约定。在许多教程和文档中，Redux 操作是这样定义的：

{
  type: "ACTION_NAME",
  payload: {
    foo: 123,
    bar: 456,
  }
}

payload 对象的意义何在？为什么不直接写这个：

{
  type: "ACTION_NAME",
  foo: 123,
  bar: 456,
}

我正在使用 Flow，我喜欢将我的所有操作类型定义为一个联合，而无需嵌套有效负载：

type Action = {
  type: 'ACTION_NAME',
  foo: number,
  bar: number,
} | {
  type: 'ANOTHER_ACTION',
  someData: string,
} | {
  type: 'ONE_MORE_ACTION',      
  moreData: boolean,
}

我不必多次输入payload，我的所有操作都会自动完成和类型检查，所以我不确定我错过了什么。

我是否因为没有将所有数据都放入 payload 对象而错过了一些好处？

【问题讨论】：

标签： javascript reactjs redux flowtype

【解决方案1】：

这个约定被称为 Flux Standard Actions，其动机由 Andrew Clark 阐述为

如果我们可以对它们的形状做出某些假设，那么使用 Flux 动作会容易得多。例如，基本上所有 Flux 操作都有一个标识符字段，例如 type、actionType 或 actionId。许多 Flux 实现还包括一种指示成功或失败的操作方式，尤其是作为数据获取操作的结果。为这些模式定义一个最小的通用标准可以创建有用的工具和抽象。

他对 FSA 的完整建议值得一读。

https://github.com/acdlite/flux-standard-action

简而言之，它使编写中间件（例如 Sagas）更容易，还可以帮助 Reducer 处理错误状态。

【讨论】：

哇，非常感谢！ github.com/acdlite/flux-standard-action#actions 是完美的解释。我不知道额外的“错误”和“元”键，所以现在这个约定更有意义了。
另外值得注意的是，它使执行return action.payload 或return {...state, ...action.payload} 之类的事情变得更加容易，而无需确切地知道涉及哪些键。如果所有值字段都保留在操作的根目录中，则可能需要多行代码才能正确提取它们。