Flux 启发模式

相关源文件

• docs/guides/connect-to-state-with-url-hash.md
• docs/guides/flux-inspired-practice.md
• docs/guides/initialize-state-with-props.md

此页面将介绍如何在 Zustand 中应用受 Flux 启发的模式来进行结构化的状态管理。尽管 Zustand 故意不预设任何理念，但遵循 Flux 和 Redux 的某些原则可以帮助创建可维护的状态架构，尤其是在大型应用程序中。有关使用切片（slices）进行模块化 Store 组织的更多信息，请参阅切片模式。

Zustand 中的 Flux 架构简介

Flux 是 Facebook 开发的一种架构模式，强调单向数据流。Redux 后来推广了 Flux 的一种特定实现，其中包括 reducer、action 和单个 store 等概念。Zustand 支持这些模式，同时保持其极简主义的方法。

来源: docs/guides/flux-inspired-practice.md1-13

推荐的 Flux 模式

单一 Store

遵循 Flux 的理念，Zustand 建议将应用程序的全局状态保存在一个 Store 中。这提供了一个单一事实来源，并简化了状态管理。

对于大型应用程序，您可以使用切片模式来组织 Store，同时仍然遵循单一 Store 的原则。

来源: docs/guides/flux-inspired-practice.md16-20

通过 `set`/`setState` 更新状态

为了遵循 Flux 的单向数据流原则，请始终使用 `set` 或 `setState` 来执行 Store 的更新。这确保了更新被正确合并，并且订阅者能够得到正确的通知。

来源: docs/guides/flux-inspired-practice.md22-26

共置 Store Actions

在 Zustand 中，与传统的 Flux/Redux 中分派事件的 actions 不同，Store actions 直接定义为 Store 中的方法。这种方法减少了样板代码，同时保留了将 actions 与组件分离的意图。

来源: docs/guides/flux-inspired-practice.md28-42

Redux 风格的模式在 Zustand 中

虽然 Zustand 简化了 Flux 模式，但如果需要，您仍然可以实现更明确的 Redux 风格模式。

使用具有类型和 Reducers 的 Dispatch 函数

您可以通过在 Store 的根级别定义一个 `dispatch` 函数来实现类似 Redux 的 reducer 模式

这种模式允许您在利用 Zustand 更简单的 API 的同时，维护一种更像 Redux 的架构。

来源: docs/guides/flux-inspired-practice.md45-67

使用 Redux 中间件

Zustand 提供了一个 redux 中间件，它可以完全连接您的 reducers，设置初始状态，并在状态和 vanilla API 中添加一个 dispatch 函数。

来源: docs/guides/flux-inspired-practice.md69-75

比较：传统 Redux vs. Zustand

下表重点介绍了传统 Redux 和 Zustand 的 Flux 启发方法之间的主要区别

概念	传统 Redux	Zustand
Store 创建	createStore(reducer)	create((set) => ({ /* 状态和 actions */ }))
操作	单独的 action creator，返回 action 对象	在 Store 中直接定义的方法
Reducers	计算新状态的纯函数	可选，可以使用 `set` 直接变异状态
中间件	复杂的中间件系统	简单的函数组合用于中间件
Selectors	带有手动 memoization 的 `useSelector` hook	内置的 Selector 系统，具有自动 memoization
Dispatch	所有状态更改都需要	可选，可以直接使用 action 方法

来源: docs/guides/flux-inspired-practice.md1-78

实现示例

基础的 Redux 模式

以下是如何实现带有 action 类型、reducer 和 dispatch 函数的类似 Redux 的模式

实现需要定义

1. Action 类型（常量）
2. 处理不同 action 类型的 reducer 函数
3. 带有使用 reducer 的 dispatch 函数的 Store
4. 调用 dispatch 函数的组件

来源: docs/guides/flux-inspired-practice.md49-67

Redux 中间件实现

为了获得完整的 Redux 体验，您可以使用内置的 redux 中间件

此方法需要

1. 从 'zustand/middleware' 导入 redux 中间件
2. 创建一个标准的 Redux reducer
3. 定义初始状态
4. 使用中间件创建 Store

来源: docs/guides/flux-inspired-practice.md69-75

Zustand 的 Flux 启发最佳实践

1. 将 actions 与 state 共置：这减少了单独导入 actions 的需要
2. 使用最简单的有效模式：通常情况下，Vanilla Zustand 在不需要 Redux 模式时已经足够
3. 尽可能偏好 Zustand 的原生模式，而不是强制使用 Redux 模式
4. 使用中间件组合，而不是复杂的 actions/reducers 结构
5. 记住 Zustand 是不预设理念的：您可以根据需要混合使用模式来适应您应用程序的不同部分

来源: docs/guides/flux-inspired-practice.md5-9

与 URL 状态集成

对于需要将状态与 URL 参数同步的应用程序（Flux 应用程序中的常见模式），Zustand 可以与 URL hash 或查询参数集成

这种模式使得应用程序状态可以通过 URL 进行共享，使状态可共享且可书签化。

来源: docs/guides/connect-to-state-with-url-hash.md1-153

结论

虽然 Zustand 与传统的 Flux 实现（如 Redux）相比简化了状态管理，但它仍然支持受 Flux 启发的模式，以满足那些偏好更结构化方法的用户。通过遵循这些模式，您可以创建可维护的状态架构，这些架构能够很好地适应应用程序复杂性的增长，同时保留 Zustand 的简洁性和性能优势。