Prerequisite Concepts: Key concepts to understand when using Redux">Prerequisite Concepts: Key concepts to understand when using Redux">
跳至主要內容

先備條件:Reducer 概念

"Redux 基礎" 第 3 部分:狀態、動作和 Reducer 所述,Redux Reducer 函數

  • 應具有類似於傳遞給 Array.prototype.reduce(reducer, ?initialValue) 的函數類型,即 (previousState, action) => newState
  • 應為「純粹」,這表示 Reducer
    • 執行副作用(例如呼叫 API 或修改非本機物件或變數)。
    • 呼叫非純粹函數(例如 Date.nowMath.random)。
    • 變異其引數。如果 Reducer 更新狀態,則不應修改現有的狀態物件。相反地,它應產生包含必要變更的物件。應對 Reducer 更新的狀態中的任何子物件使用相同的方法。
關於不變性、副作用和變異的注意事項

不建議變異,因為它通常會中斷時間旅行除錯,而 React Redux 的 connect 函數

  • 對於時間旅行,Redux DevTools 預期重播記錄的動作會輸出一個狀態值,但不會變更其他任何內容。變異或非同步行為等副作用會導致時間旅行在步驟之間改變行為,進而中斷應用程式
  • 對於 React Redux,connect 會檢查從 mapStateToProps 函數傳回的 props 是否已變更,以判斷元件是否需要更新。為了提升效能,connect 會採取一些依賴狀態不變性的捷徑,並使用淺層參考相等性檢查來偵測變更。這表示直接變異對物件和陣列所做的變更將不會被偵測到,而元件也不會重新渲染

在 Reducer 中產生唯一 ID 或時間戳記等其他副作用也會使程式碼難以預測,且更難除錯和測試。

由於這些規則,在繼續使用其他特定技術來組織 Redux Reducer 之前,務必完全理解下列核心概念

Redux Reducer 基礎知識

重要概念:

  • 以狀態和狀態形狀思考
  • 依據狀態區塊委派更新責任(reducer 組合
  • 高階 reducer
  • 定義 reducer 初始狀態

閱讀清單:

純函數和副作用

重要概念:

  • 副作用
  • 純函數
  • 如何以組合函數的方式思考

閱讀清單:

不可變資料管理

重要概念:

  • 可變性與不可變性
  • 安全地不可變更新物件和陣列
  • 避免會變更狀態的函數和陳述式

閱讀清單:

正規化資料

重要概念:

  • 資料庫結構和組織
  • 將關聯式/巢狀資料拆分成不同的資料表
  • 為特定項目儲存單一定義
  • 以 ID 參照項目
  • 使用以項目 ID 為金鑰的物件作為查詢資料表,並使用 ID 陣列追蹤順序
  • 將項目關聯在關係中

閱讀清單: