mapDispatchToProps:有任何意义吗?

IT技术 reactjs react-native redux react-redux
2021-05-19 17:33:06

我想知道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什么意义?简单地返回动作有什么缺点吗?

谢谢!

2个回答

澄清另一个马克的评论:

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

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

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

所以是的,connect()支持传递一个充满动作创建者的对象作为第二个参数的速记语法,但是仍然有很好的用例传递一个实际的mapDispatchToProps函数来自己做事(特别是如果你的调度准备依赖于实际的 prop 值某种程度上来说)。

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

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

所以不,你不需要实现 mapStateToProps。相反,你可以像这样传递你的动作:

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