mapDispatchToPropsって何 [React][React Native]

react-reduxのconnect関数を使うときに出てくるmapToDispatchToPropsが何なのか、使うとどうなるのか今ひとつピンと来なかったことが昔あったので書いてみる。
初心者向け、ということでお手柔らかに。

---

Reduxについて何となくわかっている前提で。

軽く復習

Action, ActionCreator, dispatchについて。 Reducerについては説明を省略します。

Action

Actionは{ type, payload }という形の連想配列です。
typeは「〇〇する！」という宣言みたいなもの。
payloadは〇〇するのに必要な情報。

ActionCreator

ActionCreatorはActionを返す関数です。
つまりpayloadを引数にとって{ type, payload }という連想配列をreturnする関数。

dispatch

一言でいうと「ActionをStoreに結びつけるもの」です。
初心者がやりがちなミスというか、私がやったミスなんですが、例えばincrementCount()というActionCreatorをimportして

<button onClick={()=>incrementCount()}>+1</button>

みたいにdispatchをせずActionCreatorをそのまま呼び出しても、Storeのstateには何の変化もありません。
ActionCreatorはあくまでも連想配列をreturnする関数なので、当たり前ではあるんですが。
上記の例だと

<button onClick={()=>dispatch(incrementCount())}>+1</button>

とすると(Reducerが正しく書かれてあれば)Reducerのあのswitch-case文を走り、Storeのstateには期待した変更がなされます。

---

本題

mapDispatchToPropsは読んで字のごとくなんですが、「DispatchをPropsにmapする」ものです。
react-reduxのconnectをimportして

~

const mapDispatchToProps = dispatch => ({
  incrementCount: () => dispatch(incrementCount())
  foo: () => dispatch(foo()),
  hoge: () => dispatch(hoge()),
})

export default connect(mapStateToProps, mapDispatchToProps)(Component)  // mapStateToPropsがある場合。 無ければ第一引数はnull。

のように使います。
補足するとconnectの第二引数においてあれば、dispatchを引数にとることや戻り値の書き方などは上の例と同じようにする必要があるものの、名前は必ずしもmapDispatchToPropsとする必要はありません。なんなら第二引数に連想配列をそのまま入れてもいいです。

さて上のように書くとComponent中で次のように使えます。

<button onClick={()=>this.props.incrementCount()}>+1</button>

dispatch(incrementCount())だったのがthis.props.incrementCount()となっていますね。

mapDispatchToPropsが「何なのか」という問には答えられてないですが、mapDispatchToPropsを用いるとどんなふうになるのかはコードを見ていただければ分かると思います。
dispatchしているものをまとめることで管理しやすいというのが利点かなと思います(たぶん)

以上です。