reactjs - 映射调度到属性 : any point?

标签 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 有何意义?简单地返回操作有什么缺点吗?

谢谢!

最佳答案

澄清其他马克的评论:

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

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

但是,如您的示例所示,传递一个单个操作创建者作为第二个参数,不会执行您想要的操作,因为 connect() 会解释为作为准备功能而不是需要绑定(bind)的 Action 创建者。

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

您可能需要引用the API docs for `connect() .

关于reactjs - 映射调度到属性 : any point?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37325419/

相关文章:

reactjs - 与 `defaultProp` 对应的 `PropTypes.element` 的正确值是多少?

javascript - React 中的渲染函数中的状态为空

javascript - React-Native 的本地 require() 路径

javascript - 如何比较两个 redux store 状态?

javascript - 在 React-Redux Store 中配置 devToolsExtension 和 applyMiddleware()

javascript - 什么时候应该在 redux 中调度异步操作?

javascript - 直接监听组件中的 Reflux Actions

javascript - 数组内容不在 ReactJS 中呈现

javascript - 扩展 ReactNative 的平台特定扩展?

android - React native Touch 事件正在通过绝对 View 传递