ReduxとExpressかElectronか
Reduxのチュートリアルを見終わったので、実際に手を動かしてみようと思い、リポジトリを作成してみました。中身はExample: Todo List | Reduxです。
express
とelectron
で動作確認ができます。
感想
写経しているとredux
に関して徐々にわかってきました。redux
は画面状態をStore
内のstate
オブジェクトとして持っていて、操作によって発行されるaction
オブジェクトとstate
をセットで、Reducer
に渡すことで、新たな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
を結びつけているか、という部分ですかね。