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

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