在本文中，我們將探討 Zustand 如何使用 setState 函數實現狀態替換，重點放在一個有趣的功能：覆蓋狀態而不合併。我們將透過一個簡單的測試案例來解釋如何使用它。

了解狀態合併與狀態涵蓋

在查看程式碼之前，了解合併和覆蓋狀態之間的差異很重要。

• 合併狀態： 預設情況下，當您在 Zustand（或 React）中更新狀態時，它會將新狀態與現有狀態合併。僅更新的欄位發生更改，而狀態的其餘部分保持不變。

• 覆蓋狀態： 相反，覆蓋狀態 用新物件取代整個狀態，丟棄先前狀態中存在但不屬於其一部分的所有欄位新狀態的。

何時覆蓋狀態

在某些情況下需要替換整個狀態，例如：

• 表單提交後重置狀態。

• 載入不同資料集時完全替換狀態。

覆蓋 Zustand 狀態的測試案例

這是 Zustand 程式碼庫中的一個簡單測試案例，示範如何使用 setState 函數覆寫狀態：

it('can set the store without merging', () => {
  const { setState, getState } = create(
    (_set) => ({
      a: 1,
    }),
  )

  // Should override the state instead of merging.
  setState({ b: 2 }, true)
  expect(getState()).toEqual({ b: 2 })
})

分解測試

1.創建商店 首先，創建一個 Zustand 商店，其初始狀態為：

const { setState, getState } = create(
    (_set) => ({
      a: 1,
    }),
  )

初始狀態是一個對象，其單一屬性設定為 1。 create 函數傳回兩個基本方法：

• setState:此方法用於更新store的狀態。

• getState: 此方法會擷取商店的目前狀態。

2.覆蓋狀態 這裡的關鍵操作是將當前狀態 { a: 1 } 替換為全新的狀態：

setState({ b: 2 }, true)

• 透過傳遞 true 標誌作為第二個參數，Zustand 知道它應該覆蓋狀態，而不是將新物件 { b: 2 } 與現有物件合併。這完全取代了先前的狀態，因此 { a: 1 } 被刪除，新狀態變成 { b: 2 }。

3.驗證狀態替換 最後，測試確保狀態已完全替換：

expect(getState()).toEqual({ b: 2 })

所期望的是，在呼叫 setState({ b: 2 }, true) 後，store 的狀態將只包含 { b: 2 } 而不再包含 { a: 1 }。

Zustand 如何覆蓋狀態

下圖來自Zustand設定狀態的原始碼。

如您所見，如果替換標誌存在，則 nextState 成為新狀態。

(replace ?? (typeof nextState !== 'object' || nextState === null))

這是一個聰明的方法，如果replace為假，預設情況下，(typeof nextState !== ‘object’ || nextState === null))條件被檢查。

結論

Zustand 提供了一種在 React 中管理狀態的簡單方法，並且使用帶有覆蓋標誌的 setState 完全覆蓋狀態的能力提供了額外的靈活性。無論您想要重置表單、載入新資料還是清除舊值，此功能都允許您完全控制應用程式中狀態的管理和更新方式。

關於我們：

在 Think Throo，我們的使命是教授開源專案中使用的高階程式碼庫架構概念。

透過在 Next.js/React 中練習高階架構概念，提升您的程式設計技能，學習最佳實踐並建立生產級專案。

我們是開源的 — https://github.com/thinkthroo/thinkthroo （請給我們一顆星！）

透過我們基於程式碼庫架構的高階課程來提升您的團隊技能。請透過 [email protected] 與我們聯絡以了解更多資訊！

參考：

1. https://github.com/pmndrs/zustand/blob/v4.5.5/tests/basic.test.tsx#L471C13-L471C50

2. https://github.com/pmndrs/zustand/tree/v4.5.5?tab=readme-ov-file#overwriting-state