認識Redux核心概念及運作流程


Posted by Andy Tsai on 2020-05-31

Redux是什麼?

Redux是一個用於管理狀態的library,它解決了當react app龐大時,狀態難以管理及維護的問題。

有沒有使用Redux的差別:

圖片來源

  • 在沒有使用Redux的情況下(如上圖左),綠色子component要和頂層父component通訊就得一層一層調用上去,如果我們的component一多,這些數據的傳遞將會非常難管理與維護。

  • 用了Redux後(如上圖右),我們就可以把數據都放在公共儲存區(Store),而綠色子component要改變數據,只要去改Store對應的數據即可,並且其他component也會自動感知到Store的變化,自動更新。

Redux運作流程


圖片來源

  • Action:一個物件,描述要對資料做什麼事
  • Action Creator:封裝action,方便管理
  • Store:負責所有數據的儲存,每個專案只會有一個Stroe
  • Reducer:處理邏輯,接收action和state,並回傳新的state給store

改變state流程:

  1. React Components的某事件被觸發,發起action,並透過dispatch方法傳action給Store
  2. Store再把之前的state和傳來的action給Reducer
  3. Reducer接收到後會回傳新的state給Store
  4. Store用新的state替換掉舊的state
  5. React Components感知到state發生改變,從Store重新取數據,更新畫面

用生活化的方式比喻:

  1. 借書的人(React Components)提出借書要求(Action)給 圖書館管理員(Store)
  2. 圖書館管理員(Store)查看他的紀錄本(Reducers)查詢狀況
  3. 找到後再給借書的人(React Components)

這樣應該比較好懂,但這是方便快速理解,要深入理解建議還是看上面的流程。

Middleware 中間件

中間指的是action和store之間,實際上就是對dispatch方法的封裝/升級,通常用於統一管理非同步請求或複雜邏輯,
主流的Middleware Library有Redux-thunk和Redux-saga

加上Middleware後的流程

圖片來源

Redux三大原則

  • Store是唯一的:整個專案只會有一個
  • Store是唯讀的:唯一改state的方法就是觸發action
  • Reducer必須是pure function
    pure function是函數式編程的一個概念,意思是給固定的輸入就會有固定的輸出,不應該產生任何副作用。

Reference:
https://chentsulin.github.io/redux/index.html


#React #Redux #w3HexSchool







Related Posts

當一個 Scrum Master 是一個怎樣的體驗?

當一個 Scrum Master 是一個怎樣的體驗?

寫程式是什麼?為什麼要寫程式?

寫程式是什麼?為什麼要寫程式?

[筆記] HTTP 協定

[筆記] HTTP 協定



Comments