ushumpei’s blog

生活で気になったことを随時調べて書いていきます。

ReduxとExpressかElectronか

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

github.com

expresselectronで動作確認ができます。

感想

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

今回の登場人物は、

  • Component(presentation, container)
  • Action Creator
  • Reducer & Store

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

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

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

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

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

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