先備條件:Reducer 概念
如 "Redux 基礎" 第 3 部分:狀態、動作和 Reducer 所述,Redux Reducer 函數
- 應具有類似於傳遞給
Array.prototype.reduce(reducer, ?initialValue)
的函數類型,即(previousState, action) => newState
- 應為「純粹」,這表示 Reducer
- 不執行副作用(例如呼叫 API 或修改非本機物件或變數)。
- 不呼叫非純粹函數(例如
Date.now
或Math.random
)。 - 不變異其引數。如果 Reducer 更新狀態,則不應修改現有的狀態物件。相反地,它應產生包含必要變更的新物件。應對 Reducer 更新的狀態中的任何子物件使用相同的方法。
關於不變性、副作用和變異的注意事項
不建議變異,因為它通常會中斷時間旅行除錯,而 React Redux 的
connect
函數
- 對於時間旅行,Redux DevTools 預期重播記錄的動作會輸出一個狀態值,但不會變更其他任何內容。變異或非同步行為等副作用會導致時間旅行在步驟之間改變行為,進而中斷應用程式。
- 對於 React Redux,
connect
會檢查從mapStateToProps
函數傳回的 props 是否已變更,以判斷元件是否需要更新。為了提升效能,connect
會採取一些依賴狀態不變性的捷徑,並使用淺層參考相等性檢查來偵測變更。這表示直接變異對物件和陣列所做的變更將不會被偵測到,而元件也不會重新渲染。在 Reducer 中產生唯一 ID 或時間戳記等其他副作用也會使程式碼難以預測,且更難除錯和測試。
由於這些規則,在繼續使用其他特定技術來組織 Redux Reducer 之前,務必完全理解下列核心概念
Redux Reducer 基礎知識
重要概念:
- 以狀態和狀態形狀思考
- 依據狀態區塊委派更新責任(reducer 組合)
- 高階 reducer
- 定義 reducer 初始狀態
閱讀清單:
- 「Redux 基礎知識」第 3 部分:狀態、動作和 reducer
- Redux 文件:減少樣板程式碼
- Redux 文件:實作取消歷史記錄
- Redux 文件:
combineReducers
- 高階 reducer 的威力
- Stack Overflow:儲存初始狀態和
combineReducers
- Stack Overflow:狀態金鑰名稱和
combineReducers
純函數和副作用
重要概念:
- 副作用
- 純函數
- 如何以組合函數的方式思考
閱讀清單:
不可變資料管理
重要概念:
- 可變性與不可變性
- 安全地不可變更新物件和陣列
- 避免會變更狀態的函數和陳述式
閱讀清單:
正規化資料
重要概念:
- 資料庫結構和組織
- 將關聯式/巢狀資料拆分成不同的資料表
- 為特定項目儲存單一定義
- 以 ID 參照項目
- 使用以項目 ID 為金鑰的物件作為查詢資料表,並使用 ID 陣列追蹤順序
- 將項目關聯在關係中
閱讀清單: