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

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

1-1eN9vpOkkGRy2U_RmqyM8Q

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

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

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

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

在 Flux 以前…

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

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

1-1PuUNCRYbYo8GNwgcniB6w

1-70lLOYbfnZ9iTP1iMPxjLw

雖然不是所有 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. 樓下的房客(寫這篇的時候讓我聯想到這本小說)

課程資訊

深入淺出_Flux_—_4cats_io_—_Medium

關於Soft & Share

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

最近招募中的網路讀書會

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

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

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

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s

分類

Web開發