zustand_state

用途

本技能面向在 React 应用中使用 Zustand 进行状态管理的开发场景，提供经过生产验证的配置方案。它强调最小化 API、无样板代码、TypeScript 优先、细粒度订阅带来的性能优势，并内置对持久化、DevTools 等中间件的支持。

主要能力

提供三种基础配置模式：JavaScript 基础 Store、TypeScript Store（推荐）、持久化 Store。
覆盖中间件配置：persist（localStorage/sessionStorage）、devtools（Redux DevTools）、immer（可变更新）、自定义中间件，以及多中间件组合。
提供常见模式：计算/派生值、异步操作、重置 Store、带参数的 Selector。
预防 5 类已知问题：Next.js 水合不匹配、TypeScript 双括号缺失、persist 中间件导入错误、无限渲染循环、Slices 模式 TypeScript 复杂度。
附带 8 个即用模板文件（basic-store.ts、typescript-store.ts、persist-store.ts、slices-pattern.ts、devtools-store.ts、nextjs-store.ts、computed-store.ts、async-actions-store.ts）。
附带深度参考文档（middleware-guide.md、typescript-patterns.md、nextjs-hydration.md、migration-guide.md）与版本检查脚本 check-versions.sh。
支持 Vanilla Store（不依赖 React）用法。

使用方式

安装 Zustand：

npm install zustand
# 或
pnpm add zustand
# 或
yarn add zustand

创建 Store（TypeScript 示例）：

import { create } from 'zustand'

interface BearStore {
  bears: number
  increase: (by: number) => void
  reset: () => void
}

const useBearStore = create<BearStore>()((set) => ({
  bears: 0,
  increase: (by) => set((state) => ({ bears: state.bears + by })),
  reset: () => set({ bears: 0 }),
}))

在组件中使用：

import { useBearStore } from './store'

function BearCounter() {
  const bears = useBearStore((state) => state.bears)
  return <h1>{bears} around here...</h1>
}

function Controls() {
  const increase = useBearStore((state) => state.increase)
  return <button onClick={() => increase(1)}>Add bear</button>
}

持久化 Store 示例：

import { create } from 'zustand'
import { persist, createJSONStorage } from 'zustand/middleware'

interface UserPreferences {
  theme: 'light' | 'dark' | 'system'
  language: string
  setTheme: (theme: UserPreferences['theme']) => void
  setLanguage: (language: string) => void
}

const usePreferencesStore = create<UserPreferences>()(
  persist(
    (set) => ({
      theme: 'system',
      language: 'en',
      setTheme: (theme) => set({ theme }),
      setLanguage: (language) => set({ language }),
    }),
    {
      name: 'user-preferences',
      storage: createJSONStorage(() => localStorage),
    },
  ),
)

使用模板：

cp ~/.claude/skills/zustand-state-management/templates/typescript-store.ts src/store/

版本检查：

cd your-project/
~/.claude/skills/zustand-state-management/scripts/check-versions.sh

适用场景

React 应用中的客户端状态管理。
需要状态跨页面刷新保留（localStorage/sessionStorage）。
需要 Redux DevTools 调试。
Next.js 项目中的 SSR 安全状态管理。
大型复杂 Store 的模块化组织（Slices 模式）。
从 Redux、Context API 或 Zustand v4 迁移。

限制

不适用于服务端状态管理，官方建议改用 TanStack Query。
依赖 React 18+ 与 TypeScript 5+（TypeScript 为可选但推荐）。
最新版本为 zustand@5.0.8，v4.x 使用不同 API。
在 SSR 中访问 localStorage 需配合水合检查，否则会出现水合不匹配。
具体收费、价格、平台等信息暂未提供。

技能介绍

用途

主要能力

使用方式

适用场景

限制