深入淺出 Flux
“Flux 是一種單向資料流的設計模式，幫助你撰寫有條理的前端架構。”
在互動高的前端應用中，應用程式的資料狀態和使用者的操作事件是我們最傷腦筋的地方。
舉例來說：當使用者登入，我們需要更新個人資料、修改頁面權限、清空舊用戶快取等，一個事件會聯動許多狀態；當狀態更新，我們也必須刷新 UI，如顯示個人頭像、重整用戶選單等，狀態的改變會觸發許多 UI 的更新。
因此，當我們在處理「事件改變狀態，狀態刷新 UI」這類複雜的互動，就非常需要一個模式來規範應用程式的資料流；而 Flux 能夠替你解決這些問題。
Flux 由何而來
Flux 是由 Facebook 提出的設計概念，它最重要的思維是單向資料流。
2014 年 F8 開發者大會中，FB 曾經用兩張圖來解釋為什麼他們使用 Flux 代替 MVC，MVC 的問題又是什麼：
雖然不是所有 MVC 的實作都如上圖般，因為雙向資料流而容易產生不好維護的問題。然而，Flux 更明確的定義了單向資料流中各角色職責及互動方式，提高了可維護性，讓 Facebook 最後選擇了它。
最後，你需要知道 Flux 是一個單向資料流的設計概念，並不是一個程式庫，因此它有非常多種的實作方式。如果把資料流想像成一齣劇，我們接下來就來探討在 Flux 這齣劇中，每位卡司負責的職責和整個劇本的編排。
Flux 的演員
Flux 中有四位主要角色：
- Action：規範所有改變資料的動作，讓你可以快速掌握整個 App 的行為。
- Dispatcher：將目前發生的行為，告知給所有已註冊的 Store。
- Store：存放資料和業務邏輯，並且只提供 getter API 讓人取得資料。
- View：根據資料渲染 UI 和傾聽使用者的操作事件。
如果你覺得很難透過一小段描述體會每位角色的職責，可以參考下方的詳細解說：
Flux 的劇情
當演員都清楚自己的職責後，再來就是讓這偉大劇本的齒輪動起來啦：
總結
“Flux 是一種單向資料流的設計模式，幫助你撰寫有條理的前端架構。”
Flux 明確規範每個參與角色的職責，它帶給你的好處是：
- 你可以快速掌握整個 App 中的行為
- 資料和業務邏輯也統一存放
- 讓 View 只需要負責 UI 的排版
參考連結
- Flux For Stupid People
- A cartoon guide to Flux
- 從 Flux 與 MVC 的差異來簡介 Flux
- The Case for Flux
- 樓下的房客（寫這篇的時候讓我聯想到這本小說）
一. 課程資訊
(2016.05.13) 本課程內容有 React/Flux/Redux/ImmutableJS/ES6，目前 50%off 早鳥優惠中：）
二. 社群資訊
soft&share 是我最近加入的社群，有在經營線上讀書會、優惠團購、slack，裡面有各式各樣的技術 Channel — React、ReactNative、AngularJS、UI/UX、Swift、DevOps 等，需要夥伴的請往上方傳送門囉：）
如果你喜歡我的內容，歡迎「點此分享」到臉書給更多朋友；或是按五次下方的 LikeButton 給我個讚吧！
