高级模式

相关源文件

• docs/guides/auto-generating-selectors.md
• docs/guides/slices-pattern.md
• docs/guides/updating-state.md
• docs/integrations/immer-middleware.md
• docs/integrations/third-party-libraries.md

目的与范围

本页面介绍了 Zustand 的高级用法模式，这些模式超出了基础状态管理的范畴。这些模式可以帮助用户组织复杂的 state 逻辑，提高性能，并与其他库集成。这里介绍的模式代表了对常见状态管理挑战的既有解决方案。

有关基础 store 创建和使用，请参阅 核心概念与架构 页面。有关中间件的特定文档，请参阅 中间件系统 页面。

高级模式概述

来源: docs/guides/slices-pattern.md, docs/guides/auto-generating-selectors.md, docs/integrations/immer-middleware.md

让我们更详细地探讨这些模式

Slices 模式

Slice 模式是一种将大型 Zustand store 组织成更小、模块化块的技术。这种方法通过将 state 逻辑分解为离散的、可重用的代码块来增强可维护性。

当以下情况发生时，此模式尤其有用

• 你的 state 逻辑在一个文件中变得过于庞大
• 你想封装相关的 state 和 actions
• 多位开发者正在处理 state 的不同部分

有关详细的实现指南，请参阅 Slice 模式 页面。

来源: docs/guides/slices-pattern.md

自动生成选择器

为每个 state 片段创建 selector 可能会变得重复。自动生成 selector 模式提供了一种以编程方式为所有 state 属性和 actions 创建 selector 的方法。

使用此模式，您可以

• 减少访问 state 和 actions 时的样板代码
• 为 store 的使用者创建更直观的 API
• 维护所有 selectors 的类型安全

有关实现细节，请参阅 自动生成 Selectors 页面。

来源: docs/guides/auto-generating-selectors.md

URL 状态同步

将应用程序状态与 URL 参数同步，可以实现可共享和可书签的状态，这对于 Web 应用程序尤其有价值。

有几个第三方库有助于实现此模式

• geschichte - 使用 Zustand 和 Immer 管理查询参数
• zustand-querystring - 将 store 与查询字符串同步的中间件
• zustand-hash-storage - 使用编码选项将状态保存到 URL hash 中

有关全面的实现指南，请参阅 URL 状态同步 页面。

来源: docs/integrations/third-party-libraries.md

Store 组合

对于复杂的应用程序，您可能需要集成多个 store。Zustand 提供了几种 store 组合的模式。

直接组合

跨 Store Actions

派生 Store

第三方库 derive-zustand 可以帮助从其他 Zustand store 创建派生 store。

来源: docs/integrations/third-party-libraries.md

处理嵌套状态

不可变地更新深度嵌套的状态可能很冗长。Zustand 提供了几种模式来简化此过程。

标准方法（展开运算符）

使用 Immer 中间件

Immer 中间件支持更简单、类似修改的语法，同时在后台保持不可变性。

有关详细实现，请参阅 Immer 中间件 页面。

来源: docs/guides/updating-state.md, docs/integrations/immer-middleware.md

Flux 启发模式

虽然 Zustand 故意避免了 Redux 的样板代码，但您仍然可以根据需要实现受 Flux 启发的模式。

您可以使用以下方法在 Zustand 中实现此模式

• 返回 action 对象的 action 创建器
• store 中的 dispatch 函数
• 处理特定 action 类型的 reducer 函数

对于高级 Redux 集成，您可以使用 redux 中间件。有关更多详细信息，请参阅 受 Flux 启发的模式 页面和 redux 中间件。

中间件组合

将多个中间件组合使用可以显著增强 Zustand 的功能。组合顺序很重要，因为每个中间件都会包装前一个中间件。

常见的中间件组合包括

• devtools + persist 以实现可调试、持久化的状态
• immer + persist 以实现易于更新、持久化的状态
• subscribeWithSelector + devtools 以实现具有调试功能的精细订阅

组合中间件时，请考虑

• 执行顺序（由内到外）
• 中间件之间的类型兼容性
• 多个中间件的性能影响

来源: docs/integrations/immer-middleware.md

第三方扩展

Zustand 生态系统包含许多第三方库，它们实现了高级模式并扩展了功能

库	目的	高级模式
zustand-slices	Zustand 的 Slice 工具	Slices 模式
auto-zustand-selectors-hook	自动生成 selectors	自动生成选择器
zustand-querystring	将 store 与查询字符串同步	URL 状态同步
zustand-computed	创建计算状态	派生状态
zustand-middleware-computed-state	向 Zustand 添加计算状态	派生状态
zustand-forms	快速、类型安全的表单状态	表单管理
zustand-context	在 React Context 中创建 store	上下文集成
zundo	撤销和重做中间件	历史管理
shared-zustand	跨标签页状态共享	状态同步
zustand-multi-persist	持久化到多个存储引擎	高级持久化

有关第三方扩展的完整列表，请参阅 第三方库 页面。

来源: docs/integrations/third-party-libraries.md

结论

Zustand 的高级模式使您能够在保持库的极简哲学的同时，处理复杂的状态管理需求。通过结合这些模式，您可以创建高度可维护、高性能的状态管理解决方案，以满足您应用程序的特定需求。

有关这些模式的具体实现，请参考相应的子页面

• Slices 模式
• URL 状态同步
• 自动生成选择器
• Flux 启发模式