JavaScript
flux
reactjs

Fluxデザインパターンの勉強

More than 3 years have passed since last update.

なんだか巷で流行っているので勉強しました。
間違いなどあれば指摘していただければ助かります。

参考サイト

構成要素

  • API
  • Action
  • Dispatcher
  • Store
  • View
(API) <--> Action ---> Dispatcher ---> Store ---> View
             ↑                                      ↓
             ↑---------------------------------------

Action

Dispatcherへデータを渡すヘルパークラス。
外部と通信する場合はここが受け持つ

Dispatcher

Actionをトリガーとして、コールバックを呼ぶ。
アプリケーションの中心。

Store

Dispatcherから呼び出されるコールバックを持っている。
アプリケーションの状態を管理する。

View

Storeから状態情報を受け取って描画処理を行う。

Dispatcher

コールバックを呼び出して、actionをStoreに伝える機構

実装

Pub/Sub型である必要はない。

(各アクションは、すべてのコールバックに対して配信されるから。イベント名とかを管理する必要がない。)

各actionに対して、どのような処理を行うかというルーティングはStore側で行う。

依存関係解決の仕組み

例えば、靴の販売システムで、「ShoeStore」を更新してから、「CheckoutStore」を更新したい、という時、

Dispatcherは
1. ShoeStore
2. CheckoutStore
の順で呼び出したい。

この時は

ShoeStore.dispatcherIndex = AppDispatcher.register(ShoeStore.callback);

のようにして、Dispatcherへ登録した際の番号を保存しておき、

case 'BUY_SHOES':
  AppDispatcher.waitFor([
    ShoeStore.dispatcherIndex
  ], function() {
    CheckoutStore.purchaseShoes(ShoeStore.getSelectedShoes());
  });
  break;

のようにして、依存順序を定義する。

Store

アプリケーションの状態を保存する。
Dispatcherから渡されるactionに応じて処理をする。

callback

actionが渡される。
関係あるactionならば内部状態を変更しViewへ更新を通知する。
関係ないactionならスルー。

実装

こいつはPub/Sub形式で実装。
Viewはコイツの変更イベントを受け取って更新を行う。

Action

ActionはDispatcherの各種action発行メソッドを呼び出す。

var ShoeStoreActions = {

  loadShoes: function(data) {
    AppDispatcher.handleAction({
      actionType: ShoeStoreConstants.LOAD_SHOES,
      data: data
    })
  }

};

的な感じで、ひたすらActionが並ぶコレクションとなる。

View

Storeの発行するchangeイベントを受けて更新を行う。
Reactとかがここを担当するのだろうと思うが、フレームワークの勉強は今回は割愛。

疑問

MVCと比較

API <--> Controller ----> Model ---> View <--- User
           ↑                           ↓
           ↑----------------------------
API <--> Action ---> Dispatcher ---> Store ---> View <--- User
           ↑                                      ↓
           ↑---------------------------------------

正直、どこが変わったのかわからなかった。

Action + Dispatcher = Controller

という認識は正しいのだろうか。

Fluxアーキテクチャの覚え書きを書いたによれば、

-(GUI)アプリケーションで頻出するドメインに名前を付けた
- ドメイン間でのメッセージ(データ)フローの方向性を規定
- 各ドメインを表すオブジェクトの作り方を細かく述べた

とのことなので。MVCの上位互換と思って差し支えないように思う。

  • ControllerからViewを直接いじらない
  • ViewからModelを直接いじらない

が大きな変更点だろうか。
でも最近のフレームワークならViewControllerをかませるのが普通だと思うのだけど。