Fluxについて現時点での理解

Fluxについて現時点での理解をまとめました

Fluxって？

• 設計概念、アーキテクチャ
• こう設計するといいよねっていうFacebookの提唱
• なので実体があるわけではない

Reactとの関係は？

• ReactはFluxアーキテクチャView部分の実装、こちらはライブラリとし提供されている
• ただし、Fluxアーキテクチャに当てはめなくてもReact単体でも使える

Fluxは新しいの？

• いいえ
• ただのオブザーバーパターン（の応用）
• ビビらなくていい

Fluxの登場人物たち

• Action
• Dispatcher
• Store
• View

Flux - Action

• データの流れの起点になるひと
• 定義されるメソッドは下記に紐づくと考える
  • ユーザーの操作
  • サーバーからのレスポンス（初回レンダリング）
  • APIレスポンス
• 各Actionをトリガーにしてイベント発生させて、アクション種別とかデータを渡す

Flux - Dispatcher

• ActionとStoreを繋ぐひと
• Actionが発生させたイベントをDispatcherによってStoreに通知してデータを渡す
• イベント発生処理とイベント購読処理を備える

Flux - Store

• 状態を管理するひと
• Dispatcherが発生させるイベントを購読して、そのコールバックに自身の状態変更用（=ビジネスロジック）メソッドを渡す
• 状態変更処理はコールバック経由のみ（setter相当のメソッドは定義しない）
• 状態が変更されたら、状態変更イベントを発生させる

Flux - View

• React
• Storeの状態変更イベントを購読して、その変更イベントをトリガーにして表示更新
• 更新処理自体はReactがよしなにやってくれるはず

旨味

• データの流れを一方方向にすることでシンプルになる
• Storeの処理を正しく行ってさえいれば、Viewの表示処理を気にする必要はない　はず

使い所

• 機能モリモリなSPA
• 今のところ、アニメーションなどを多用するものには向かなそう