Fluxフローとは

はじめに

Reduxを勉強するにあたり、その元となるFlux思想を学習しました。
私の健忘録であり、誰かの役に立てれば嬉しいです。

Fluxとは

• Facebook社が提唱している、クライアントサイドのWebアプリケーション開発のためのアプリケーション・アーキテクチャ(設計思想)です。
• Reactとの併用を主に想定して作られているため、Reactとの相性が良いです。
• 大きなメリットとしては、MVCモデルなどと比較したときに、データの見通しが良いという点です。

Fluxは次の３つの要素から成り立っています

1. Store: アプリケーションの状態データを保持するオブジェクト、状態の更新を実施する
2. Action: 状態の更新をするための指示内容を表すメッセージ
3. Dispatcher: Storeに対してActionによる更新指示を行う関数

単方向データフローは、ここにUIである「View」を加え、表示されます。↓

Action → Dispatcher → Store → View(React)

実際にアプリケーションに組み込んだ場合にはユーザーの操作に応じて新たなActionをdispatchし、状態と画面を更新していきます。↓

　　　　　　　　　　←　　　Action　 ← 
               ↓                 ↑
Action → Dispatcher → Store → View(React)

処理の流れを一通り説明すると…

1. ユーザーがviewを操作(onClick,onChange等)
2. 更新するものをまとめてDispatcherへ渡す
3. DispatcherからActionを渡されたStoreが、状態を更新
4. Storeの状態が変化したことによりViewが書き換わる

おわりに

FluxはMVCモデルなどと比べ、単一方向にデータが進んでいくので見通しがよく、大規模開発になればなるほど効果を発揮します。
このFlux思想を元に作られたのがReduxということです。

参考