没有mapDispatchToProps的连接如何工作

小编典典

没有mapDispatchToProps的连接如何工作

reactjs

我在阅读redux的示例文档，然后发现了这个容器组件的示例。有人可以解释为什么在这种情况下不需要mapDispatchToProps吗。同样，该函数如何获得调度功能？

import React from 'react'
import { connect } from 'react-redux'
import { addTodo } from '../actions'

let AddTodo = ({ dispatch }) => {
let input

return (
    <div>
      <form onSubmit={e => {
        e.preventDefault()
        if (!input.value.trim()) {
          return
        }
        dispatch(addTodo(input.value))
        input.value = ''
      }}>
        <input ref={node => {
          input = node
        }} />
        <button type="submit">
          Add Todo
        </button>
      </form>
    </div>
  )
}
AddTodo = connect()(AddTodo)

export default AddTodo

阅读 245

2020-07-22

共1个答案

小编典典

connect()(AddTodo)将dispatch作为一个prop to AddTodo组件传递，即使没有状态或预定义的动作也仍然有用。多数民众赞成在mapDispatchToProps不需要您的代码的原因

现在，在组件中，let AddTodo = ({ dispatch }) => {您正在分解道具以仅访问dispatch。

如果您利用它，mapDispatchToProps可以将您的addTodo操作作为对组件的支持，然后将其命名为this.props.addTodo。因此，上述方法是替代方法。取决于您选择自己喜欢的东西

connect只是store / dispatch通过React上下文传递，因此您不必通过许多组件传递商店。不过，您不必使用connect。任何模块/
HOC模式都可以工作，连接只是碰巧使用方便。

使用dispatch的组件或使用mapDispatchToProps是同一个东西。

但是，使用可以mapDispatchToProps为您提供更大的灵活性来构造代码并使所有动作创建者都集中在一个地方。

根据文档：

[mapDispatchToProps（dispatch，[ownProps]）：dispatchProps]（对象或函数）：

如果传递了一个对象 ，则假定 该对象
内部的每个函数都是Redux操作创建者。一个具有相同功能名称的对象，但是每个动作创建者都包装在一个调度调用中，以便可以直接调用它们，这些对象将合并到组件的props中。

如果传递了一个函数，
它将作为第一个参数被分配。由您决定返回一个对象，该对象以某种方式使用分派以自己的方式绑定动作创建者。（提示：您可以使用bindActionCreators()Redux
的帮助程序。）

如果您的mapDispatchToProps函数声明为带有两个参数，则将使用dispatch作为第一个参数，将props传递给连接的组件作为第二个参数，并在连接的组件收到新的props时重新调用它。（按照惯例，第二个参数通常称为ownProps。）

如果您不提供自己的mapDispatchToProps功能或充满动作创建者的对象，则默认mapDispatchToProps
实现只是将dispatch注入到组件的props中。

2020-07-22