小编典典

mapDispatchToProps:有什么意义吗?

reactjs

我想知道mapDispatchToProps今天是否还有一点用处。我正在研究redux文档教程(以构建待办事项列表),其中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)

这样对吗?如果是这样,写一个“ a”有mapDispatchToProps什么意义?简单地返回动作有什么弊端吗?

谢谢!


阅读 383

收藏
2020-07-22

共1个答案

小编典典

为了澄清其他Mark的评论:

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

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

但是,如您的示例所示,将 单个
动作创建者作为第二个参数传递将不会做您想要的事情,因为connect()这将解释为准备功能而不是需要绑定的动作创建者。

因此,是的,connect()支持将充满动作创建者的对象作为第二个参数传入的简写语法,但是仍然有很好的用例,可以传入一个实际的mapDispatchToProps函数自行执行操作(尤其是如果您的调度准备依赖于实际的道具值)某种程度上来说)。

您可能要参考`connect()的API文档

2020-07-22