Contents
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 中有四為主要角色:
- 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
- 樓下的房客(寫這篇的時候讓我聯想到這本小說)
課程資訊
Soft & Share目前有經營 FB團購社群 並會透過slack召開網路讀書會, 有興趣歡迎來加入, Soft & Share也是廣受開發者喜愛的開發工具JetBrains合作夥伴, 歡迎透過Facebook搜尋 “JetBrains Taiwan” 即可找到JetBrains開發工具的社群, 歡迎加入社群討論.
最近招募中的網路讀書會
Soft & Share 的讀書會願景- 我們希望每本書會是一個連結, 最後這個連結會形成一個網路, 這個網路甚至會誕生新的創意, 這個新的創意會對社會有幫助, 讓人的生活變得更美好.
目前招募中的網路讀書會請參考這個頁面
喜歡我們的分享嗎? 記得使用以下社群分享按鈕分享給您的社群朋友吧!
你必須登入才能發表留言。