在 Devin 中试用 DeepWiki 处理私有仓库
DeepWiki

pmndrs/zustand

菜单

Store 创建

相关源文件

此页面详细介绍了 Zustand 中 store 的创建核心功能，解释了用于创建状态 store 的不同 API 及其底层实现。它涵盖了框架无关和 React 特定的 store 创建方法。有关创建 store 后更新状态的详细信息，请参阅状态更新。

Store 创建概览

Zustand 提供了两种主要的 store 创建方法：

  1. createStore：框架无关的原生 store 创建函数。
  2. create：React 特定的 store 创建函数，用于将 store 绑定到 React 的状态管理系统。

这两种方法都依赖于相同的底层 store 实现，但服务于不同的用例。

Store 创建流程

来源：src/vanilla.ts9-100

使用 `createStore` 创建原生 Store

`createStore` 函数是 Zustand 状态管理的基础构建块。它创建一个框架无关的 store，可以用于任何地方，而不仅仅是 React 应用。

API 签名

`createStore` 函数接受一个状态创建函数，并返回一个 store API 对象，其中包含与 store 交互的方法。

Store API

Store API（`StoreApi<T>`）提供了以下方法：

方法签名描述
setState(partial: T | Partial<T> | ((state: T) => T | Partial<T>), replace?: boolean) => void更新 store 状态。
getState() => T返回当前状态。
getInitialState() => T返回初始状态。
subscribe(listener: (state: T, prevState: T) => void) => () => void订阅状态更改，返回取消订阅函数。

来源：src/vanilla.ts9-14

实现细节

`createStore` 的实现

  1. 创建具有初始状态和一组监听器的闭包。
  2. 实现状态管理方法（setState、getState 等）。
  3. 返回包含这些方法的 store API 对象。

来源：src/vanilla.ts60-97

使用示例

来源：tests/basic.test.tsx416-429

使用 `create` 创建 React 绑定的 Store

`create` 函数构建在 `createStore` 之上，以提供 React 集成，返回一个可以直接在组件中使用的 React hook。

API 签名

返回的 hook 可与可选的选择器函数一起使用，以提取状态的特定部分。

来源：docs/apis/create.md31-32

与原生 Store 创建的比较

来源：tests/basic.test.tsx21-68

使用示例

来源：docs/apis/create.md58-111

高级 Store 创建选项

使用自定义相等函数创建 Store

为了进行性能优化，Zustand 提供了 `createWithEqualityFn`，它允许指定一个自定义相等函数来确定组件何时应该重新渲染。

来源：docs/apis/create-with-equality-fn.md36-38

自定义相等函数的用法

来源：docs/apis/create-with-equality-fn.md82-91

StateCreator 函数

StateCreator 函数是定义 store 行为的核心构建块，并用于所有 store 创建方法。

结构和功能

来源：src/vanilla.ts28-37

使用 StateCreator 创建常见模式

来源：tests/basic.test.tsx416-429

将原生 Store 与 React 结合使用

对于使用 `createStore` 创建的原生 store，您可以使用 `useStore` hook 将其集成到 React 组件中。

API 签名

这允许在 React 组件中使用框架无关的 store，并进行选择性渲染优化。

来源：docs/hooks/use-store.md28-29

Store 创建最佳实践

Store 组织

  • 将状态和 action 放在一起：将相关的状态和 action 保存在同一个 store 中。
  • 使用选择器：只提取状态中需要的部分，以最小化渲染。
  • 考虑拆分 Store：对于复杂的应用程序，可以按域或功能拆分 store。

性能考量

  • 使用选择器防止不必要的重新渲染。
  • 为复杂对象考虑使用自定义相等函数。
  • 对于独立状态部分的频繁更新，可以考虑创建单独的 store。

来源：docs/apis/create.mddocs/apis/create-with-equality-fn.md52-57

Store 创建类型系统

Zustand 使用 TypeScript 为 Store 提供类型安全。Store 创建所涉及的关键类型包括：

来源：src/vanilla.ts16-41

此类型系统支持：

  • 类型安全的 State 和 Actions。
  • 类型安全的中间件组合。
  • 从 Store 中提取 State 类型以供复用。