Jason Chung
Jul 5, 2016 · 4 min read

“Redux is a predictable state container for JavaScript apps.”

這句是 Redux 官方提供的定義,無論你是否接觸過 Redux,你是否跟當初的我一樣冒出以下幾個問題呢:

  1. Predictable,可預測?
  2. State container,狀態容器?
  3. 所以,Redux 可以幫助我什麼呢?

再探討這三個問題的答案前,我想再詢問大家是否有以下的情境呢?

  1. 在資料和頁面複雜互動的情境下,你是否對於資料流的管理傷透腦筋呢?
  2. 如果你的專案用的是 Flux,你是否有改了 Store 中一個小小的 bug,卻必須重新操作註冊流程才能測試的困擾呢?
  3. 你的專案有沒有要監控應用程式行為的需求?

如果你碰過上面這些問題,那 Redux 和這篇文章或許就是你的解藥!

Redux 的起源

Redux 啟發於 Flux 和 Elm architecture。

所以,務必先理解 Flux 是什麼?

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

PS. 如果你想更深入探討 Flux,可以參閱這篇 — 深入淺出 Flux

Flux 的重點

  1. 單向資料流:
    改變資料的行為都必須經過 Action、Dispatcher,再到 Store。
  2. Single Source of Truth:
    資料統一存放於 Store,View 要資料都需跟 Store 拿。

Flux 的優點

用更清晰的模式,規範資料和頁面複雜互動情境下的資料流。

再來,我們探討 Redux 的由來…

投影片中,將帶大家去瞭解

  1. Flux 的缺點
  2. Elm Architecture 提供什麼靈感
  3. Flux 如何演進為 Redux 的思維

從圖看 Redux

Flux 與 Redux 的差別

  1. Redux 只有一個 Store;
    Flux 有多個 Stores
  2. Redux 應用的業務資料都存於一個狀態物件中,並由 Store 去管理;
    Flux 應用的業務資料,分別存在每個 Store 中
  3. Redux 將改變業務資料的邏輯,對應成多個 Reducers 函數;
    Flux 將改變業務資料的邏輯,分別存在每個 Store 中
  4. Redux 的 Store 提供 dispatch API 傳遞 action 物件;
    Flux 提供 Dispatcher 將 action 物件傳遞給每個 Store

Redux 的核心概念

  1. 單一的狀態樹
  2. Action 描述改變
  3. Reducer 實作改變

從程式看 Redux

Redux 中 Store 的概念非常簡易,如下方程式:

總結

Redux 是一個很簡易的狀態容器,因為它管理整個應用的狀態。你無法直接透過 setter 改變資料,必須透過 action 和 reducers 來得到新資料。

Reducer 根據 action 物件和舊資料回傳新資料,因此你可以紀錄 action,並重新調用 reducer 函數來得到一樣的狀態,幫助我們做可預測的狀態管理。

所以,Redux 總歸一句:

“Redux is a predictable state container for JavaScript apps.”


參考連結

  1. Redux 官方文件
  2. An Introduction To Redux
  3. A Cartoon Intro To Redux
  4. Redux 初探
  5. The Elm Architecture
  6. Dan Abramov’s React Europe 2015 talk(Dan Abramov 是 Redux 的作者)
  7. Dan Abramov’s React Europe 2016 talk(Redux 一週年心得,推薦看
  8. Dan Abramov 解釋 Predictable State Container
  9. React Quick Tutorial(如果你想看更多 Redux 實作)
  10. Soft&Share 社群(這是我前陣子加入的社群,有在經營線上讀書會、優惠團購、slack,裡面有各式各樣的技術 Channel — React、ReactNative、AngularJS、VueJS、UI/UX 等)

如果你喜歡我的內容,歡迎「點此分享」到臉書給更多朋友;或是按五次下方的 LikeButton 給我個讚吧!

前端魔法研究室

4cats 設計學院 技術研究單位

Jason Chung

Written by

前端魔法研究室

4cats 設計學院 技術研究單位

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade