没有 mapDispatchToProps 的连接如何工作

Posted 2023-02-22

【中文标题】没有 mapDispatchToProps 的连接如何工作

【英文标题】：How does connect work without mapDispatchToProps

【发布时间】：2017-05-30 22:09:12

【问题描述】：

我正在阅读 redux 的示例文档，我发现了这个容器组件示例。有人可以解释为什么在这种情况下不需要 mapDispatchToProps 。还有，这个函数是怎么得到dispatch函数的？

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

【参考方案1】：

connect()(AddTodo) 将dispatch 作为prop to AddTodo 组件传递，即使没有状态或预定义操作，它仍然有用。这就是您的代码中不需要mapDispatchToProps 的原因

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

如果您使用mapDispatchToProps，您将让您的addTodo 操作作为组件的道具可用，然后像this.props.addTodo 一样调用它。所以上述方法是一种替代方法。这取决于你选择你觉得舒服的东西

connect 只是通过 React 上下文传递 store / dispatch，因此您不必通过许多组件传递 store。不过，您不必使用连接。任何模块/ HOC 模式都可以工作，connect 恰好是一个方便使用的东西。

在组件中使用dispatch 或使用mapDispatchToProps 是一回事。

但是，使用mapDispatchToProps 可以让您在构建代码和将所有动作创建者集中在一个地方时更加灵活。

根据docs：

[mapDispatchToProps(dispatch, [ownProps]): dispatchProps]（对象或函数）：

如果传递了一个对象，则假定其中的每个函数都是 Redux 动作创建者。具有相同函数名称但具有相同功能的对象 每个动作创建者都包含在一个调度调用中，因此它们可能是 直接调用，会被合并到组件的props中。

如果传递了一个函数，它将作为第一个参数被调度。返回一个以某种方式使用的对象取决于您 dispatch 以您自己的方式绑定动作创建者。 （提示：您可以使用 来自 Redux 的 bindActionCreators() 助手。）

如果您的 mapDispatchToProps 函数声明为采用两个 参数，它将以 dispatch 作为第一个参数调用，并且 作为第二个参数传递给连接组件的道具， 并且每当连接的组件收到新的 道具。 （第二个参数通常被称为 ownProps 约定。）

如果您不提供自己的 mapDispatchToProps 函数或对象 全是动作创作者，默认mapDispatchToProps implementation 只是将 dispatch 注入到组件的 props 中。

【讨论】：

如果我不需要mapDispatchToProps，我应该传递一个空对象还是将其留空并让它注入dispatch 到我的组件中。它会以任何方式影响性能吗？

@Norbert 如果您不需要 mapDispatchToProps，您可以完全避免使用第二个参数。所有这些都是做同一件事的不同方法，因此没有太大的性能差异

【参考方案2】：

人们倾向于以两种方式写react。一种是您通常会遇到的基于class 的方法。它基本上使用类。

class App extends Component
    constructor()
        super();
        this.state=
    
    render()
        return(

            //
        );
    

其他的是functional approach。

const App = (props) => 
​
    return(
        <div><h2>props.name</h2></div>
    )

因此，在函数式方法中，您可以将数据作为 arguments 传递给您的组件。 因此，如果您已将 dispatch 从父组件传递到 props 中的此组件。您可以使用props.dispatch 访问它。

【讨论】：

我理解这个概念，但我不知道在这种情况下组件如何接收调度。我的印象是，要接收调度函数，我需要传递一个 mapDispatchToProps，在这种情况下不是这样。是不是因为我将组件传递给 connect 函数，它现在就以某种方式接收调度？

dispatch 将从父组件作为道具传递给该组件。

但是这种方法不好。您应该使用 connect 来传递调度和道具。阅读 gaearon 的评论here