社内勉強会で使った資料です。

1. Fluxを理解しよう
2015/08/20
杉江

2. Fluxとは？
・考え方、アーキテクチャ（ライブラリではない）
・こういう風に設計するといいよねっていうFacebook
からの提唱

3. Reactとの関係は？
・React is ライブラリ
・React is Flux のView部分 の実装(Virtual DOM)

4. Fluxは新しいの？
・いいえ
・オブザーバーパターン(の応用)
・＝ビビらなくてよい

5. 押さえておきたい所
・データは一方方向に流れる

6. よく見る図

7. Fluxの登場人物
・Action
・Dispatcher
・Store
・View

8. Flux - Action
・ユーザーの操作に基づくアクションを起こす人
・Dispatcherのdispatch()を発火させる

9. Flux - Dispatcher
・ActionとStoreを繋ぐ人
・イベント発火処理を持つ(発火する人はAction)
・イベントを購読処理を持つ(購読する人はStore)

10. Flux - Store
・状態を保持
・Dispatcherイベントを購読する
・購読する際にCallbackを渡す
→Callback経由で自身の状態変更処理を行う
→状態変更処理＝ビジネスロジック
→状態変更のイベント発火(購読する人はView)

11. Flux - View
・Storeを状態変更イベントを購読
・状態変更イベント発火されたら、Viewを更新する
・React先生お願いします
→仮装DOM変更前後の差分のみをDOMに反映

12. 旨味
・データの流れが一方方向なので、シンプルでわかりや
すい（と言われている）
・Viewの心配をする必要無い
※正しくデータを更新しさえすれば

13. 使い所
わかりません。
これから見つけましょう

14. 以上