Edited at

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をかませるのが普通だと思うのだけど。