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

Posted 2023-02-16

【中文标题】我可以在 Redux 中没有 mapStateToProps 的 mapDispatchToProps 吗？

【英文标题】：Can I mapDispatchToProps without mapStateToProps in Redux?

【发布时间】：2018-05-19 08:02:49

【问题描述】：

我正在分解 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() 期望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

可以在here找到完整的repo。

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

【参考方案1】：

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

AddTodo = connect(
    null,
    mapDispatchToProps
)(AddTodo)

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

【讨论】：

但是我可以在没有 mapDispatchToProps 的情况下以同样的方式使用 mapStateToProps 吗？

@VelizarAndreevKitanov 是的

仅使用mapStateToProps 时，可以省略connect 的第二个参数。不需要通过null

对于没有 mapDispatchToProps 的反向情况 mapStateToProps 不需要传递 null。只通过 mapStateToProps

connect 应该接受对象文字作为参数而不是参数列表。