为什么调度组件而不是动作文件？答案

【问题标题】：Why dispatch in a component instead of an action file?为什么调度组件而不是动作文件？
【发布时间】：2017-09-28 03:06:30
【问题描述】：

在整个网络中，我看到代码通过从react-redux 传入的connect 函数通过this.props.dispatch 直接从组件调度。我的问题是：为什么不直接从动作文件中直接分派，而不仅仅是将动作对象返回到组件中并从那里分派？我觉得我在这里错过了一些东西。当我们可以简单地调用一个函数，传入需要的内容，然后让动作创建者在我们的 react 组件之外为我们进行调度时，直接从组件中调度感觉有点不对。

这是我的意思的一个简短示例：https://gist.github.com/overthemike/5481dab563c7f97f4151ab1c8c9cb4f1

我错过了什么？

【问题讨论】：

标签： javascript reactjs redux react-redux

【解决方案1】：

这实际上只是一种方法。必须选择您更喜欢并适合您的代码风格的内容。

我最喜欢的方式是这样的，使用 ES6：

import { actionA, actionB } from 'path/to/redux/actions'

class MyComponent extends React.Component { ... }

const mapStateToPros = {...}
const mapDispatchToProps = { actionA, actionB }
export default connect(mapStateToPros, mapDispatchToProps)(MyComponent)

通过使用mapDispatchToProps 的简写符号，MyComponent 将接收函数actionA 和actionB 作为道具，并且可以使用this.props.actionA 调用。 const mapDispatchToProps = { actionA, actionB } 将被 redux 解释为：

const mapDispatchToProps = (dispatch) => {
  return {
    actionA: (...args) => {dispatch(actionA(...args))},
    actionB: ...,
  }
}

所以调用this.props.actionA()实际上是调用dispatch(actionA())

【讨论】：

我看到的唯一问题（语法非常好）是它似乎缺乏明确性（特别是对于新手），因为动作对象只是返回一个普通的 javascript 对象调度是在幕后进行的。尝试遵循代码实际上永远不会将您带到减速器本身，这可能看起来令人困惑。

【解决方案2】：

您可以当然可以在连接的组件中直接调用this.props.dispatch()。但是，我更愿意通过不直接引用 dispatch 并让它们调用其他函数作为道具来让我的 React 组件“不知道” Redux。这样，组件就不会知道或关心函数是绑定的 Redux 操作创建者、来自父级的回调还是测试中的模拟函数。

正如@cfraser 所说，我强烈建议使用“对象速记”语法将动作创建者传递给connect。

您可能对我的帖子Idiomatic Redux: Why Use Action Creators? 感兴趣，其中包含有关该主题的更多详细信息。

根据您对可追溯性的评论：您将从被传递给组件的动作创建者、动作创建者定义、动作类型、响应该动作类型的化简器中退一步。

【讨论】：