mapStateToPropsとmapDispatchToPropsの理解の仕方

React・Reduxをしているとやっかいになるのが、
「mapStateToProps」と「mapDispatchToProps」の概念。

僕のように開発もしたようなない人にとっては特に理解するのが難しいと思います。
今回は「mapStateToProps」と「mapDispatchToProps」はこんなイメージで考えたら理解しやすくなったよ！というのを共有したいと思います！

mapStateToPropsとmapDispatchToProps

まずは「mapStateToProps」と「mapDispatchToProps」はこれだけでは完結しなくて、「connect」というものも必要になります。

基本的にこの3つが必要！

そもそもこれらは別に使わなくても実装は可能。
だけど使った方が結構楽なんです。

mapStateToPropsとmapDispatchToPropsの全体的なイメージ

「mapStateToProps」と「mapDispatchToProps」はどっちも名前の通り、「ToProps」なんです。
つまり、Propsにする（変換する・適応する）ってことです。
つまり、

Propsとして使うことができるようにする

ということなんですね。
これ、理解できると結構楽になります。

ということで1つずつどんなイメージか見ていきましょう。

mapStateToPropsのイメージ

子コンポーネントでStateの情報を使いたいとき、本来なら親コンポーネントからPropsとして引き継いでもらわないといけないんですけど、「mapStateToProps」を使うとそんなことはお構いなしに親コンポーネントから引き継がなくても子コンポーネントからすぐに使うことができるようになります。イメージはこんな感じ。

const mapStateToProps = state => {
  return { cprops: state.cprops }
}

「mapStateToProps」という“チケット”を持っているC Propsくんは見事Propsとして入ることができるんですね。

mapDispatchToPropsのイメージ

ボタンコンポーネントの孫コンポーネントがあったとしましょう。本来なら孫コンポーネントからはアクション関数を呼び出すことはできません。親→子→孫と繋いでようやくクリックの挙動が発動されます。ですが、この「mapDispatchToProps」を使うとこれも親や子なんかお構いなし！孫コンポーネントから即呼びできるようになります。こんな感じです。

import { actionA } from './actionCreator'
import { bindActionCreators } from 'redux'

const mapDispatchToProps = dispatch => {
  return bindActionCreators({ actionA }, dispatch)
}

孫コンポーネントさんがアクションAさんを使いたいと「mapDispatchToProps」を使ってアクションAさんを直接呼び出しています。（Propsに追加しています）

まとめ

ということでざっくりとした「mapStateToProps」と「mapDispatchToProps」のイメージを書かせてもらいました。

本来なら親などから引き継いでもらったり、繋いでもらったりしないといけないところ、「mapStateToProps」と「mapDispatchToProps」を使うことでそんなことは一切なしで、使いたいコンポーネントからすぐにPropsとして使うことができる超便利な関数なんだということをイメージできればいいなと思います。
とっつきにくいところもあるだろうけど、これを使いこなせれば効率化されたりやりたいことの幅もかなり広がると思います。