[解決済み] ReduxでmapStateToPropsを使わずにmapDispatchToPropsを使うことはできますか？

質問

Reduxのtodoの例を分解して、理解しようとしているところです。私は次のように読みました。 mapDispatchToProps を使うとディスパッチアクションをpropsとしてマッピングできると書いてあったので addTodo.js を dispatch(addTodo()) を呼ぶ代わりに mapDispatchToProps を使うように書き換えることを考えました。私はそれを 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 を使ったことがなかったので、何が悪いのかよくわかりませんでした。私の直感では 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を行うことが可能かどうかということです。私がやろうとしていることは、許容できるプラクティスなのでしょうか、もしそうでなければ、なぜそうしないのでしょうか？

どのように解決するのですか？

はい、できます。ただ null を第一引数として渡すだけです。

AddTodo = connect(
    null,
    mapDispatchToProps
)(AddTodo)

そうです、これは単に許容範囲というだけでなく、アクションを引き起こすための推奨される方法なのです。使用方法 mapDispatchToProps を使うことで、reactコンポーネント内でreduxを使用していることを隠すことができます。