zustand

用途

Zustand 是一个面向 React 的极简、无倾向性（unopinionated）状态管理库。它用于在 React 应用中管理全局状态，无需 Provider 包裹，也没有 Redux 式的样板代码，通过基于 Hook 的 API 提供自然的使用体验。

适用场景包括：需要全局状态但不想引入 Redux 复杂度的 React 应用；希望减少样板代码与打包体积的项目；偏好直接状态变更而非 reducer 的团队；需要灵活状态水合的 SSR 应用（如 Next.js）；以及从 Redux 或 Context API 迁移到更简单方案的场景。

主要能力

Store 创建：使用 create 函数创建 store，可访问 set 与 get。
状态访问：支持选择整个 store、选择特定字段、使用选择器解构、多个选择器。
状态变更：通过 set 进行添加、更新、删除等操作。
React 集成：useStore Hook，配合 shallow 浅比较或自定义相等函数避免不必要的重渲染。
组件外使用：getState 读取、subscribe 订阅、setState 更新。
TypeScript 支持：类型化 store 创建、类型推断、选择器类型辅助、多 store 组合。
切片模式（Slices）：将 store 拆分为多个 slice，并支持跨 slice 通信。
中间件：persist（持久化，支持部分持久化、版本迁移、自定义存储）、devtools（Redux DevTools 集成与动作命名）、immer（直接变更状态），以及中间件组合。
异步操作与 API 集成：基础异步 action、乐观更新与回滚、请求去重。
计算值（选择器）：基础选择器、store 内派生状态（getter）、参数化选择器。
性能优化：订阅模式、瞬态更新（transient updates，不触发订阅者）、批量更新。
测试策略：Mock store、测试工具函数、测试间重置 store。
迁移指南：从 Redux 迁移的对照示例。

使用方式

安装：

npm install zustand

基础示例：

// stores/useCounterStore.ts
import { create } from 'zustand'

interface CounterState {
  count: number
  increment: () => void
  decrement: () => void
}

export const useCounterStore = create<CounterState>((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}))

// components/Counter.tsx
import { useCounterStore } from '@/stores/useCounterStore'

export function Counter() {
  const { count, increment, decrement } = useCounterStore()

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  )
}

在组件外读写：

const count = useStore.getState().count
const unsubscribe = useStore.subscribe(
  (state) => console.log('Count changed:', state.count)
)
useStore.setState({ count: 42 })
useStore.setState((state) => ({ count: state.count + 1 }))

中间件组合示例：

const useStore = create<State>()(
  devtools(
    persist(
      immer((set) => ({
        // Store implementation
      })),
      { name: 'app-storage' }
    ),
    { name: 'AppStore' }
  )
)

适用场景

React 应用需要全局状态但希望避免 Redux 的复杂度。
追求最小样板代码与更小打包体积的项目。
偏好直接状态变更而非 reducer 的团队。
需要灵活状态水合的 SSR 应用（如 Next.js）。
从 Redux 或 Context API 迁移到更简单方案。

限制

资料未提供关于浏览器兼容性、包体积具体数值、版本要求、许可证、性能基准或官方支持范围等限制性信息，暂未提供。

技能介绍

用途

主要能力

使用方式

适用场景

限制