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流程:
- React Components的某事件被觸發,發起action,並透過dispatch方法傳action給Store
- Store再把之前的state和傳來的action給Reducer
- Reducer接收到後會回傳新的state給Store
- Store用新的state替換掉舊的state
- React Components感知到state發生改變,從Store重新取數據,更新畫面
用生活化的方式比喻:
- 借書的人(React Components)提出借書要求(Action)給 圖書館管理員(Store)
- 圖書館管理員(Store)查看他的紀錄本(Reducers)查詢狀況
- 找到後再給借書的人(React Components)
這樣應該比較好懂,但這是方便快速理解,要深入理解建議還是看上面的流程。
Middleware 中間件
中間指的是action和store之間,實際上就是對dispatch方法的封裝/升級,通常用於統一管理非同步請求或複雜邏輯,
主流的Middleware Library有Redux-thunk和Redux-saga
加上Middleware後的流程
圖片來源
Redux三大原則
- Store是唯一的:整個專案只會有一個
- Store是唯讀的:唯一改state的方法就是觸發action
- Reducer必須是pure function
pure function是函數式編程的一個概念,意思是給固定的輸入就會有固定的輸出,不應該產生任何副作用。