ReduxとExpressかElectronか - ushumpei’s blog

Reduxのチュートリアルを見終わったので、実際に手を動かしてみようと思い、リポジトリを作成してみました。中身はExample: Todo List | Reduxです。

expressとelectronで動作確認ができます。

感想

写経しているとreduxに関して徐々にわかってきました。reduxは画面状態をStore内のstateオブジェクトとして持っていて、操作によって発行されるactionオブジェクトとstateをセットで、Reducerに渡すことで、新たなstateを取得します。 $(state, action) \longmapsto state$

今回の登場人物は、

Component(presentation, container)
Action Creator
Reducer & Store

処理の流れもこの順番です。

画面はコンポーネント（Component）のツリー構造で表現されます。コンポーネントにはPresentation ComponentとContainer Componentの二種類があり、Presentation Componentは構造を、Container Componentは状態を変化させる方法を定義します。単独で部品としても使えますが、Container Componentで定義した状態を変化させる関数を、react-reduxライブラリに含まれるconnect関数を使って、Presentation Componentに結びつけて使用したりもできます。また、このconnectによってStoreとComponentの結びつけも行なっているようです。（ちょっと調べないと、です）
また、コンポーネントのツリーの頂点にProviderというreact-reduxライブラリに含まれるコンポーネントを追加しているので、ここが状態をツリーの枝に伝える仕組みを提供しているのかもしれないです。

特定の動作に対して発行するActionをAction Creatorで定義しておきます。これは最低限typeというプロパティを持ったオブジェクトを生成すれば問題ないようです。

ReducerがStoreを定めているのだろうという認識で、この二つは同じ行に書いています。（実装的な視点、ですかね）Reducerは古いstateと、発行されたactionを引数に新しいstateを返します。reduxライブラリのcreateStore関数によってReducerからStoreが生成されます。

いろいろ書きましたが、それぞれの部品はわかるものの、連結部分がわかりにくいという感想です。

知らなくてはいけないのはreact-reduxのProvider、connectによっていかにコンポーネントとStoreを結びつけているか、という部分ですかね。