用途
本技能用于指导在 React 客户端应用中使用 Zustand 5 进行状态管理，覆盖 store 定义、状态读取、状态更新以及常见中间件的组合方式。触发场景为：使用 Zustand 实现客户端状态（stores、selectors、persist middleware、slices）。
主要能力
基础 Store
使用 create 创建带类型定义的 store，包含状态字段与操作方法。示例中定义了 CounterStore，包含 count、increment、decrement、reset，并通过 set 更新状态。组件中通过 useCounterStore() 解构使用。
Persist 中间件
通过 zustand/middleware 的 persist 将状态持久化，示例中 SettingsStore 保存 theme 与 language，并配置 name: "settings-storage" 作为 localStorage 的 key。
选择器（Zustand 5）
- 选择单个字段：
useUserStore((state) => state.name)，避免不必要的重渲染。 - 选择多个字段：使用
zustand/react/shallow的useShallow包裹选择器，返回{ name, email }。 - 应避免直接选择整个 store（
useUserStore()），因为任意状态变化都会触发重渲染。
异步 Action
在 store 中定义异步方法，示例 fetchUser 通过 set 管理 loading、error、user 状态，并在 try/catch 中处理请求成功与失败。
Slices 模式
将 store 拆分为多个 slice，例如 createUserSlice 与 createCartSlice，各自定义状态与操作，最后在 store.ts 中通过 create<Store>()((...args) => ({ ...createUserSlice(...args), ...createCartSlice(...args) })) 合并。
Immer 中间件
通过 zustand/middleware/immer 的 immer，可以在 set 中直接对状态进行可变式修改，示例中 addTodo 使用 state.todos.push(...)，toggleTodo 直接修改 todo.done。
DevTools
通过 zustand/middleware 的 devtools 包裹 store 定义，并配置 { name: "MyStore" } 作为 Redux DevTools 中显示的名称。
在 React 之外使用
- 通过
useCounterStore.getState()获取状态与方法，例如const { count, increment } = useCounterStore.getState();。 - 通过
useCounterStore.subscribe(...)订阅状态变化，返回unsubscribe用于取消订阅。
使用方式
按照上述模式在项目中引入 zustand 及对应中间件（zustand/middleware、zustand/middleware/immer、zustand/react/shallow），定义 store 后在 React 组件中通过选择器读取状态，或在组件外通过 getState 与 subscribe 访问。
适用场景
适用于 React 客户端状态管理，包括需要持久化的设置类状态、需要异步加载的数据状态、需要按领域拆分的复杂 store，以及需要调试工具支持或需要在 React 组件外访问状态的场景。
限制
资料未提供关于版本兼容性、性能基准、包体积、安装命令、收费或授权等信息，暂未提供。