認識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 流程：
- 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 是函數式編程的一個概念，意思是給固定的輸入就會有固定的輸出，不應該產生任何副作用。
Reference:
https://chentsulin.github.io/redux/index.html
