用途:该技能面向在 React(尤其 Next.js)项目中使用 Zustand 进行状态管理的场景。Zustand 是轻量级 React 状态管理库,基于 hooks,避免 reducer、context 与大量样板代码,适合管理全局和局部状态。适用场景包括全局 UI 状态(弹窗、侧边栏、主题偏好)、多组件共享状态、组件外的复杂状态逻辑,以及需要跨导航持久化的状态;简单局部状态、单组件表单状态等则用 React 自带状态即可。
主要能力:使用 TypeScript 创建类型安全的 store,采用显式类型标注与双调用模式:create<State>()((set) => ({ ... }));支持选择器按需订阅以减少重渲染,多值选择配合 useShallow;状态更新支持部分更新 set({ key: value })、函数式更新 set((state) => ({ ... })) 与整体替换 set(state, true);提供中间件 combine(分离 state 与 actions 以自动推断类型)、devtools(集成 Redux DevTools 调试)、persist(localStorage/sessionStorage 持久化),中间件可叠加,建议 devtools 置于最外层。
使用方式:store 按作用域放置,如单项目 src/stores/user.ts、monorepo 共享 packages/shared/stores/、应用专属 apps/web/stores/。Zustand hooks 必须在 Client Component 中使用并加 "use client" 指令;服务端组件不可使用 Zustand,应通过 async/await 取数经 props 传给客户端组件,或用 URL 搜索参数传递可共享状态。状态类型定义遵循项目约定使用 type 而非 interface,仅模块扩展需用 interface。测试可用 Vitest,参见 ./references/testing.md。与 React 19 完全兼容,Next.js 15+ 无需特殊配置。
限制:资料未提供该技能的具体安装命令、版本号、支持的平台范围、收费或价格信息,暂未提供。详细实现可参考仓库中的 ./references/beginner-typescript.md、./references/advanced-typescript.md 与 ./references/testing.md。