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

Question

我很难理解dispatch突然出现的魔术论点作为示例中的表示组件的第一个参数containers/AddTodo.js.

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

AddTodo = connect()(AddTodo)

到目前为止,我的理解是第一个AddTodo被认为是Presentation组件,后者是Container组件

在这种情况下,表示组件似乎dispatch作为第一个参数注入.不幸的是,在回顾之后我感到困惑,并意识到演示组件的其余部分并非如此.

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

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

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

Answer 1

当你使用connect()in时: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()帮助程序.)如果省略它,默认实现只是将dispatch注入组件的props.如果将ownProps指定为第二个参数,则其值将是传递给组件的props,并且只要组件接收到新的props,就会重新调用mapDispatchToProps.