mapDispatchToProps：有啥意义吗？

Posted 2023-02-22

【中文标题】mapDispatchToProps：有啥意义吗？

【英文标题】：mapDispatchToProps: any point?mapDispatchToProps：有什么意义吗？

【发布时间】：2016-09-16 11:07:25

【问题描述】：

我想知道今天使用mapDispatchToProps 是否还有意义。 我正在处理redux documentation tutorials（构建待办事项列表），其中VisibleTodoList 被描述为：

import  connect  from 'react-redux'
import  toggleTodo  from '../actions'
import TodoList from '../components/TodoList'

const getVisibleTodos = (todos, filter) => 
  switch (filter) 
    case 'SHOW_ALL':
      return todos
    case 'SHOW_COMPLETED':
      return todos.filter(t => t.completed)
    case 'SHOW_ACTIVE':
      return todos.filter(t => !t.completed)
  


const mapStateToProps = (state) => 
  return 
    todos: getVisibleTodos(state.todos, state.visibilityFilter)
  


const mapDispatchToProps = (dispatch) => 
  return 
    onTodoClick: (id) => 
      dispatch(toggleTodo(id))
    
  


const VisibleTodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)

export default VisibleTodoList

但是，我被告知今天，我可以简单地不定义 mapDispatchToProps 并通过以下方式连接所有内容：

const VisibleTodoList = connect(
  mapStateToProps,
  toggleTodo
)(TodoList)

对吗？如果是这样，写mapDispatchToProps 有什么意义？简单地返回动作有什么缺点吗？

谢谢！

【参考方案1】：

澄清另一个马克的评论：

connect() 的第二个参数可以采用两种主要形式。如果您将函数作为参数传递，connect() 假定您要自己处理调度准备，以 dispatch 作为参数调用您的函数，并将结果合并到组件的 props 中。

如果您将一个对象作为第二个参数传递给connect()，它假定您已将一个道具名称映射给了动作创建者，因此它会自动通过bindActionCreators 实用程序运行所有这些对象并使用结果作为道具。

但是，将 single 动作创建者作为第二个参数传递，正如您的示例所做的那样，不会做您想做的事情，因为 connect() 会将其解释为准备函数而不是需要绑定的动作创建者。

所以是的，connect() 支持将一个充满动作创建者的对象作为第二个参数传入的简写语法，但是仍然有很好的用例可以传入一个实际的mapDispatchToProps 函数来自己做事（尤其是如果您的调度准备以某种方式依赖于实际的道具值）。

您可能想参考the API docs for `connect()。

【讨论】：

啊...你为什么说mapDispatch 需要三个 args？根据消息来源，它只被一两个调用。

只想添加最后一行，特别是如果您的调度准备以某种方式依赖于实际的道具值，这正是我仍然自己准备一些动作创建者的原因。事实上，它很少声明 mapDispatchToProps 实际上需要 2 个参数，其中第二个是 ownProps ，在这里我可以将默认参数从容器对象道具注入到我的动作创建者中，而不必将它们传递给子组件。 （感谢markikson的提醒，我无法再次编辑评论，所以我只是重新发布了更正）。

【参考方案2】：

connect() 如果它们作为函数名称的对象传入，则会自动将调度绑定到您的操作。

所以不，您不需要实现 mapStateToProps。相反，您可以像这样传递给您的操作：

export default connect((state) => state, 
  action1,
  action2,
)(MyComponent);