【JavaScript】「状態管理」や「Flux」とは？

状態とは？

アプリケーションのデータのことです。ユーザーの操作やイベント発生により値がリアルタイムに更新されていきます。状態の例としては下記です。

• ECサイトのショッピングカートの商品

データフローとは？

アプリケーションが持つデータの流れのことです。「どこにデータを保持しデータをどのように更新していくのか」という設計が重要になります。

Flux

データフローには設計パターンがあり、Facebookが提唱しているFluxが有名です。データフローは単一方向のみとなっています。現在のVuexをはじめとする状態管理ライブラリは、このFluxの考え方を多く取り込んでいます。

Fluxの特徴

• 単方向データフローで実装する際に選択肢が限られていて理解が簡単なコードになりやすい。
• カプセル化されており影響が少なくなり保守作業が容易になる。

Fluxの概念図

Action

状態の更新を行うデータのことです。Viewなどから発火するイベント(ボタンを押す。ページを読み込むなど）

Dispatcher

Actionというデータを元に状態の更新を行います。

Store

アプリケーション全体のデータやビジネスロジックを持ちます。状態の取得を行いViewに渡します。

View

アプリケーションの表示を行います。

Fluxの影響を受けたライブラリ

さまざまなライブラリがFluxの影響を受けています。

• Redux
• Flux(Facebook社による参考実装)
• MobX
• Almin

MVVMとの比較

MVVMはビュー(モデル)とロジック(ビューモデル)を分離するアーキテクチャになります。昨今のUIにはイベントや、状態、APIによる非同期リクエストなどの処理が多いです。

それに伴いMVVMでは双方向にデータをやり取りすることを目的としており、ビューモデルのロジックが肥大化、複雑化してしまうことで実装メンテナンス上に課題が生じる案件が多いです。

Fluxは、一方向にデータをやり取りします。また、ViewにはAction(Event)だけを持たせて、アプリケーション全体をイベントトリブンな設計にすることが可能です。

Fluxを導入することで、ViewやViewModelから状態管理のコードを分離することができるので、ソースコードがすっきりして保守性がかなり向上します。（もし、MVVMのままだとViewModelのソースコードを修正するとViewのソースも変更する必要が発生してきます。）