Fluxとは

Facebook社が提唱している、クライアントサイドのWebアプリケーション開発のための、アプリケーション・アーキテクチャ（設計思想）です。
Fluxは Action 、Dispatcher 、Storeという3つの要素を持った実装パターンに分けられ、それぞれの役割は以下になります。

• Action
  Viewからのイベント（ユーザーのボタンタップなど）により通信などの処理を行い、Dispatcherに通知する。

• Dispatcher
  Actionからの通知をStoreに伝達する。

• Store
  Dispatcher経由で流れてきたActionの結果を格納（保管）しておく。

Fluxの特徴

Action → Dispatcher → Store → View と、単一方向のデータフローによってUI設計をしていることが最大の特徴です。これにより、開発規模が大きくなってもデータフローが複雑になりにくいメリットがあります。

また、一度リクエストした通信の結果を他の画面でも使用したい時には、結果がStoreに保管されているため、もう一度他の画面で通信を行うことなく、Storeから以前の結果を取り出すことが可能です。

Fluxを用いたとあるニュース記事の一覧実装の例

Fluxを用いると以下のように分業されます。

• • Action
    Viewの生成完了トリガーにより、ニュース記事一覧の取得処理をリクエスト。結果をDispatcherに流します。

• • Dispatcher
    Actionから受け取った通信結果をStoreに通知します。

• Store
  Dispatcher経由で受け取った通信結果を格納します。View側ではStoreの変更を購読している為、最終的にViewに通知が行き、通信結果であるニュース記事一覧が表示されます。

現場の声

複数の画面において、共通の処理結果を使用したり、大規模な画面数でのアプリを開発する上で、メリットを感じています。処理結果を1つのStoreという場所に集約していることで、他の画面に受け渡すという煩雑な処理が不要になる上、他の実装者のコードでも流れを追いやすくなっています。

関連用語

MVVM
MVC

＜執筆・監修＞
アルサーガパートナーズ株式会社　DX技術用語集制作チーム　App Div.

（2021年6月時点）