用途:在 React 应用中用 Zustand v5 管理全局状态,适用于跨组件共享状态、持久化到 localStorage/sessionStorage,以及构建模态框、侧边栏、主题、购物车等 UI 状态,也可替代复杂场景下的 React Context。
主要能力:基于 React 18+ 的 useSyncExternalStore;最小化 create() API;TypeScript 优先,采用柯里化写法 create<State>()((set) => ({...})) 以获得完整类型推断;中间件可组合 devtools、persist、immer;体积约 2KB gzip;无需 Provider 包裹。
使用方式:按功能模块组织 store,如 modules/cores/stores/ 放共享 store(theme、ui),modules/auth/src/stores/ 放认证状态,modules/cart/src/stores/ 放购物车状态,类型放 modules/[feature]/src/interfaces/。文件分为 store.ts(create() 创建,最多 40 行)、store.interface.ts(接口)、use-store.ts(带 selector 的自定义 hook)。选择器始终用 useStore((s) => s.field),数组或对象选择器需用 useShallow 防止多余重渲染。中间件按 devtools -> persist -> immer 顺序叠加。
限制与禁止:不要持久化认证令牌(应使用 httpOnly cookie);对象选择器不可省略 useShallow;不要使用 v4 语法;避免单一巨型 store,应拆分或使用 slices。服务端状态应改用 TanStack Query,而非本技能。本技能为纯 React 变体,不处理 Next.js App Router 的请求隔离问题,后者参见 nextjs-zustand。资料还提到实现前需并行启动三个 agent(explore-codebase、research-expert、mcp__context7__query-docs),实现后运行 fuse-ai-pilot:sniper 验证。