React-Reduxの記事を読み漁っていました。
メソッドを1つ1つ解説している所から、まとめて難しく解説しているところも様々です。
しかしReact-Reduxはやっぱり覚えることが多すぎて難しいですね。

自分の理解力が追いついていないのがすごく悔しくなってきたので
徹底的に調べ上げて1月中React-Reduxをマスターしようと思います。

前回はReduxの基本を理解出来たので書きましたが
今日色々調べているとReduxというよりも元になっているFluxですね。

ReduxはDispatchというものがないと書かれているところがありました
(storeにdispatchメソッドがあるけどあれは違うのでしょうか……？)

メソッドはあるけど本来のDispatchではないということなのかもしれませんね。

そしてReduxはReducerというものがありそいつが値の変更をするようです。
Actionから手続き書を受け取り、Storeから現在の状態を受け取ることで
元の状態を変更せず素材にすることで新たな状態を作って返すという役割でした。

Reduxだけだと簡単ですね。

さて、次にReactとReduxをつなぐReact-Reduxですが
大きく分けてProviderとconnectメソッドが用意されています。

Provider

プロバイダー、インターネットにつなぐための業者とは違います。
意味合いは「繋ぎ手」という意味で同じなのですがこれはReactとReduxの繋ぎ手になります。

Reactで例えばindex.jsでAPPコンポーネントを呼び出すときはそのタグを書きますが
Reduxを使うときはこのReact-Reduxが提供するProviderを使います。

Reactコンポーネント(例えばAPPコンポーネント)をこのProviderでラップすることで
APP内でstoreのインスタンスを使えるようにしてくれます。

どういう仕組みになっているのかはわからないです。
このProviderを定義しているところをみればわかりそうですが、今はそれが目的ではないのでやめておきましょう。

connectメソッド

そしてこのconnectメソッドが重要でReduxと連携させたいコンポーネントをラップします。
connectメソッドはまだ完全に理解出来てないので詳しく説明できないのですが
分かっているのは第一引数にステートを渡し、第二引数にディスパッチを渡すということ。

そして返り値がメソッドのようなので、その後ろに引数として繋ぎ込みたいコンポーネントを指定します。

connect(mapStateToProps,mapDispatchToProps)(APP)

初め見た時なんじゃこの書き方！と思ったが冷静にみたらconnectメソッドの返り値がメソッドで
そのメソッドに引数としてAPPを渡しているんだなって理解出来ました。

そして自分で書いていて確かに見ている人まったく意味わからないですねこれ。

mapStateToPropsとmapDispatchToPropsがまだよくわかってなくて
説明を見ているとステートやディスパッチをプロパティとして渡すということみたいです。
確かに名前がそんな感じですね。

今日色々記事を見ていてこの2つがいまいち自分の頭の中で理解できてないのでまだ説明が出来ません。
次回はこの2つを完璧に覚えるために一度超絶シンプルなReact-Reduxを組んでみようと思います。

色んな要素が混じってくるのでファイルを分けるのが普通ですが
極限まで短くして1つのファイルに収めてみようと思います。

もしかすると分けざるを得ない箇所があるかもしれませんが、ご了承ください。
頑張ってindex.jsの1つのファイルだけで納められるように頑張ってみます。