mapDispatchToProps:任何一点?

时间:2016-05-19 13:54:55

标签: reactjs react-native redux react-redux

我想知道今天是否还有一点使用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有什么意义?简单地返回动作有什么缺点吗?

谢谢!

2 个答案:

答案 0 :(得分:23)

澄清其他马克的评论:

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

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

然而,将单个动作创建者作为第二个参数传递,就像您的示例所做的那样,将无法执行您想要的操作,因为bindActionCreators会将其解释为准备函数,不是需要绑定的动作创建者。

所以是的,connect()支持一个简短的语法,即传递一个充满动作创建者的对象作为第二个参数,但仍有很好的用例传递一个实际的connect()函数来做事情你自己(特别是如果你的调度准备以某种方式依赖于实际的道具值)。

您可能需要参考the API docs for `connect()

答案 1 :(得分:8)

如果将调度作为函数名对象传入,

connect()将自动将调度绑定到您的操作。

所以不,你不需要实现mapStateToProps。相反,你可以通过这样的行动:

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