我可以在Redux中使用没有mapStateToProps的mapDispatchToProps吗?


92

我正在分解Redux的todo示例以尝试理解它。我读到它mapDispatchToProps允许您将调度动作映射为道具,因此我想到重写addTodo.js以使用mapDispatchToProps而不是调用dispatch(addTodo())。我叫它addingTodo()。像这样:

import React from 'react';
import {connect} from 'react-redux';
import addTodo from '../actions';

let AddTodo = ({addingTodo}) => {
  let input;
  return (
      <div>
        <form onSubmit={e => {
          e.preventDefault()
          if (!input.value.trim()) {
            return
          }
          addingTodo(input.value)
          input.value = ""
        }}>
          <input ref={node => {
            input = node
          }} />
          <button type="submit">Submit</button>
        </form>
      </div>
  )
}

const mapDispatchToProps = {
  addingTodo: addTodo
}

AddTodo = connect(
  mapDispatchToProps
)(AddTodo)

export default AddTodo

但是,当我运行该应用程序时,出现此错误:Error: Invalid value of type object for mapStateToProps argument when connecting component AddTodo.。我以前从未mapStateToProps从AddTodo组件开始,所以我不确定是什么问题。我的直觉说,connect()期望mapStateToProps先于mapDispatchToProps

工作原件如下所示:

import React from 'react';
import {connect} from 'react-redux';
import addTodo from '../actions';

let AddTodo = ({dispatch}) => {
  let input;
  return (
      <div>
        <form onSubmit={e => {
          e.preventDefault()
          if (!input.value.trim()) {
            return
          }
          dispatch(addTodo(input.value))
          input.value = ""
        }}>
          <input ref={node => {
            input = node
          }} />
          <button type="submit">Submit</button>
        </form>
      </div>
  )
}

AddTodo = connect()(AddTodo)

export default AddTodo

完整的仓库可以在这里找到。

所以我的问题是,有没有mapStateToProps可以做mapDispatchToProps吗?我要尝试做的是可接受的做法吗?如果没有,为什么呢?

Answers:


144

是的你可以。只是null作为第一个参数传递:

AddTodo = connect(
    null,
    mapDispatchToProps
)(AddTodo)

是的,这不仅是可以接受的做法,还是触发操作的推荐方法。使用mapDispatchToProps允许隐藏在React组件中使用Redux的事实


6
但是我可以不使用mapDispatchToProps来使用mapStateToProps吗?
Velizar Andreev Kitanov

6
@VelizarAndreevKitanov是的
iofjuupasli

22
仅使用时mapStateToProps,可以省略第二个参数connect。没必要通过null
theUtherSide

1
对于反向情况,没有mapDispatchToProps的mapStateToProps无需传递null。仅通过mapStateToProps
Rajesh Nasit

2
connect应该接受对象文字作为参数而不是参数列表。
Mahdi Pedram
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.