ChatGPT解决这个技术问题 Extra ChatGPT

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

我正在分解 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.。我从来没有在 AddTodo 组件上使用 mapStateToProps,所以我不确定出了什么问题。我的直觉是 connect() 期望 mapStateToPropsmapDispatchToProps 之前。

工作原件如下所示:

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

可以在 here 中找到完整的存储库。

所以我的问题是,是否可以在没有 mapStateToProps 的情况下执行 mapDispatchToProps?我正在尝试做一个可接受的做法 - 如果不是,为什么不呢?


i
iofjuupasli

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

AddTodo = connect(
    null,
    mapDispatchToProps
)(AddTodo)

是的,这不仅仅是可接受的做法,它是触发操作的推荐方式。使用 mapDispatchToProps 可以隐藏在你的 react 组件中使用 redux 的事实


但是我可以以同样的方式使用没有 mapDispatchToProps 的 mapStateToProps 吗?
@VelizarAndreevKitanov 是的
仅使用 mapStateToProps 时,可以省略 connect 的第二个参数。不必通过 null
对于没有 mapDispatchToProps 的反向情况 mapStateToProps 不需要传递 null。只通过 mapStateToProps
connect 应该接受对象文字作为参数而不是参数列表。