如何覆蓋您的 Zustand 狀態。

在本文中，我們將探討 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:此方法用於更新商店的狀態。

• 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))

這是一個聰明的方法，如果替換為 false（預設），則檢查 (typeof nextState !== ‘object’ || nextState === null)) 條件。

結論

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

關於我們：

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

透過在 Next.js/React 中練習高階架構概念，將您的編碼技能提高 10 倍，學習最佳實踐並建立生產級專案。

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

透過我們基於程式碼庫架構的高階課程來提升您的團隊的技能。請透過hello@thinkthroo.com聯絡我們以了解更多資訊！

參考資料：

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

以上是如何覆蓋您的 Zustand 狀態。的詳細內容。更多資訊請關注PHP中文網其他相關文章！