在本文中，我们将探讨 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