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列で表現してみる

  1. UI
  2. Action
  3. EventHundler
  4. Dispatch
  5. Store
  6. Reducer
  7. State
  8. Action
  9. 待機
  10. UI(1)に戻る