Question

我很难理解魔术论证dispatch，它突然出现在containers/AddTodo.js示例中作为演示组件的第一个参数。

let AddTodo = ({ dispatch }) => {
    /* Omitted */
}

AddTodo = connect()(AddTodo)

到目前为止，我的理解是第一个AddTodo被视为演示组件，后者是容器组件

在这种情况下，表示组件似乎注入了dispatch作为第一个参数。不幸的是，我在回顾之后感到困惑，并意识到the rest of the presentation component并非如此。

const Todo = ({ onClick, completed, text }) => (
    /* Omitted */
)

Todo.propTypes = {
  onClick: PropTypes.func.isRequired,
  completed: PropTypes.bool.isRequired,
  text: PropTypes.string.isRequired
}

dispatch参数如何出现在演示组件中？

Answer 1

当您在connect()中使用AddTodo = connect()(AddTodo)时，您正在使用AddTodo注入dispatch组件而不会收听商店。 dispatch现在可以通过道具在您的组件中使用。如果您使用参数解构，可以将其称为this.props.dispatch()或直接称为dispatch()，即let AddTodo = ({ dispatch }) ...

以下是官方redux文档中的详细说明：https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options

connect（[mapStateToProps]，[mapDispatchToProps]，[mergeProps]，[options]）

[mapDispatchToProps（dispatch，[ownProps]）：dispatchProps]（Object或Function）：如果传递了一个对象，则其中的每个函数都将被假定为Redux动作创建者。具有相同功能名称的对象，但每个动作创建者都包含在一个调度调用中，因此可以直接调用它们，它们将合并到组件的props中。如果传递了一个函数，它将被赋予调度。由您来返回一个以某种方式使用dispatch以您自己的方式绑定动作创建者的对象。（提示：您可以使用Redux中的bindActionCreators（）帮助程序。）如果省略它，默认实现只是将调度注入组件的props。如果将ownProps指定为第二个参数，则其值将为是传递给组件的道具，只要组件收到新的道具，就会重新调用mapDispatchToProps。

Answer 2

react-redux connect可以收到一个mapDispatchToProps参数，以便通过dispatch电话打包您的动作创建者。如果未通过mapDispatchToProps，connect将使用default mapDispatchToProps：

const defaultMapDispatchToProps = dispatch => ({ dispatch })

如您所见，返回了具有dispatch属性的对象。此对象将与来自mapStateToProps的道具以及由属性传递给组件（ownProps）的任何道具合并。结束对象将是connect传递给原始组件的道具。

Answer 3

正如Piotr Berebecki所说，connect()注入派遣。它将它注入到道具中，({dispatch})从道具中解析调度，并将其分配给变量dispatch。

您可以重写AddTodo：

let AddTodo = (props) => {
 const { dispatch } = props;
...
};

组件如何神奇地接收`dispatch`作为其第一个参数？

3 个答案: