Soft & Share 站友好文分享-深入淺出Flux

Jason Chung目前參加Soft & Share的Slack ReacJS channel , 如果您對ReacJS開發技術有興趣, 歡迎加入我們的Slack與我們一起討論.

這篇獲得Jason Chung同意, 同步轉載於Soft & Share的Blog, 如果您想閱讀Jason Chung分享的更多文章, 可以追蹤他的Medium

“Flux 是一種單向資料流的設計模式，幫助你撰寫有條理的前端架構。”

在互動高的前端應用中，應用程式的資料狀態和使用者的操作事件是我們最傷腦筋的地方。

舉例來說：當使用者登入，我們需要更新個人資料、修改頁面權限、清空舊用戶快取等，一個事件會聯動許多狀態；當狀態更新，我們也必須刷新 UI，如顯示個人頭像、重整用戶選單等，狀態的改變會觸發許多 UI 的更新。
因此，當我們在處理「事件改變狀態，狀態刷新 UI」這類複雜的互動，就非常需要一個模式來規範應用程式的資料流；而 Flux 能夠替你解決這些問題。

因此，當我們在處理「事件改變狀態，狀態刷新 UI」這類複雜的互動，就非常需要一個模式來規範應用程式的資料流；而 Flux 能夠替你解決這些問題。

在 Flux 以前…

Flux 是由 Facebook 提出的設計概念，它最重要的思維是單向資料流。

2014 年 F8 開發者大會中，FB 曾經用兩張圖來解釋為什麼他們使用 Flux 代替 MVC，MVC 的問題又是什麼。

雖然不是所有 MVC 的實作都會如上圖般，因為雙向資料流而容易產生不好維護的問題。然而，Flux 更明確的定義了單向資料流中各角色職責及互動方式，提高了可維護性，讓 Facebook 最後選擇了它。

最後，你需要知道 Flux 是一個單向資料流的設計概念，並不是一個程式庫，因此它有非常多種的實作方式。如果把資料流想像成一齣劇，我們接下來就來探討在 Flux 這齣劇中，每位卡司負責的職責和整個劇本的編排。

Flux 的演員

Flux 中有四為主要角色：

1. Action：規範所有改變資料的動作，讓你可以快速掌握整個 App 的行為。
2. Dispatcher：將目前發生的行為，告知給所有已註冊的 Store。
3. Store：存放資料和業務邏輯，並且只提供 getter API 讓人取得資料。
4. View：根據資料渲染 UI 和傾聽使用者的操作事件。

如果你覺得很難透過一小段描述體會每位角色的職責，可以參考下方的詳細解說：

Flux 角色詳解

Flux 的劇情

當演員都清楚自己的職責後，再來就是讓這偉大劇本的齒輪動起來啦：

Flux 流程詳解

總結

“Flux 是一種單向資料流的設計模式，幫助你撰寫有條理的前端架構。”

Flux 明確規範每個參與角色的職責，它帶給你的好處是：

1. 你可以快速掌握整個 App 中的行為
2. 資料和業務邏輯也統一存放
3. 讓 View 只需要負責 UI 的排版

參考連結

1. Flux For Stupid People
2. A cartoon guide to Flux
3. 從 Flux 與 MVC 的差異來簡介 Flux
4. The Case for Flux
5. 樓下的房客（寫這篇的時候讓我聯想到這本小說）

課程資訊

關於Soft & Share

 Soft & Share目前有經營 FB團購社群 並會透過slack召開網路讀書會, 有興趣歡迎來加入, Soft & Share也是廣受開發者喜愛的開發工具JetBrains合作夥伴, 歡迎透過Facebook搜尋 “JetBrains Taiwan” 即可找到JetBrains開發工具的社群, 歡迎加入社群討論.

最近招募中的網路讀書會

Soft & Share 的讀書會願景- 我們希望每本書會是一個連結, 最後這個連結會形成一個網路, 這個網路甚至會誕生新的創意, 這個新的創意會對社會有幫助, 讓人的生活變得更美好. 

目前招募中的網路讀書會請參考這個頁面

喜歡我們的分享嗎? 記得使用以下社群分享按鈕分享給您的社群朋友吧!