Reduxを帰納的に理解する取り組み
Overview
Redux(フロントエンドの状態管理フレームワーク)に関する基本的な知見をギュッと圧縮するよ。
Motivation/Context
仕事でRedux関連のライブラリをアップデートするタスクがあったのですが、そこらへんの知識が乏しくて太刀打ちできなかった。。。
とはいえ、調べてもよくわからないので、わかっていることをここに書いて、最後に理解できるようにしちゃおう。っていう取り組み。だから帰納的。
Get Started!!
Reduxアーキテクチャ
ReduxはFluxアーキテクチャに更に制限を追加して、アプリケーションの状態管理をスムーズにするフレームワークです。
Fluxのデータフローに加えて以下のような制限が加わります。
Storeはアプリケーションに1つのみ存在する。つまり状態の更新先・参照先は常に同じStore(シングルトン)
Storeの状態(State)を変更できるのは、Reducerのみ
ReducerはStore内のStateを、Viewより発行された「一意のActionType」により振り分け、新しいStateに更新する
Reducerは常に同じ結果を返す(非同期処理やランダムな計算を行ってはいけない)
ref: https://qiita.com/stranger1989/items/4819b5e4539caea828bf
Reduxの流れを1列で表現してみる
- UI
- Action
- EventHundler
- Dispatch
- Store
- Reducer
- State
- Action
- 待機
- UI(1)に戻る