Back to Details

zustand-state

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Zustand State Management

Zustand 状态管理

Minimal state management - no providers, minimal boilerplate.
轻量级状态管理 - 无需提供者，极少样板代码。

Quick Reference

快速参考

typescript
import { create } from 'zustand'

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

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

// In component - select only what you need
const bears = useBearStore((state) => state.bears)
const increase = useBearStore((state) => state.increase)
typescript
import { create } from 'zustand'

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

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

// 在组件中 - 仅选择你需要的内容
const bears = useBearStore((state) => state.bears)
const increase = useBearStore((state) => state.increase)

State Updates

状态更新

typescript
// Flat updates (auto-merged at one level)
set({ bears: 5 })
set((state) => ({ bears: state.bears + 1 }))

// Nested objects (manual spread required)
set((state) => ({
  nested: { ...state.nested, count: state.nested.count + 1 }
}))

// Replace entire state (no merge)
set({ bears: 0 }, true)
typescript
// 扁平化更新（自动合并一级属性）
set({ bears: 5 })
set((state) => ({ bears: state.bears + 1 }))

// 嵌套对象（需要手动展开）
set((state) => ({
  nested: { ...state.nested, count: state.nested.count + 1 }
}))

// 替换整个状态（不合并）
set({ bears: 0 }, true)

Selectors & Performance

选择器与性能

typescript
// Good - subscribes only to bears
const bears = useBearStore((state) => state.bears)

// Bad - rerenders on any change
const state = useBearStore()

// Multiple values with useShallow (prevents rerenders with shallow comparison)
import { useShallow } from 'zustand/react/shallow'

const { bears, fish } = useBearStore(
  useShallow((state) => ({ bears: state.bears, fish: state.fish }))
)

// Array destructuring also works
const [bears, fish] = useBearStore(
  useShallow((state) => [state.bears, state.fish])
)
typescript
// 推荐 - 仅订阅bears状态
const bears = useBearStore((state) => state.bears)

// 不推荐 - 任何状态变化都会触发重渲染
const state = useBearStore()

// 使用useShallow获取多个值（通过浅比较避免不必要的重渲染）
import { useShallow } from 'zustand/react/shallow'

const { bears, fish } = useBearStore(
  useShallow((state) => ({ bears: state.bears, fish: state.fish }))
)

// 数组解构同样适用
const [bears, fish] = useBearStore(
  useShallow((state) => [state.bears, state.fish])
)

Access Outside Components

在组件外部访问状态

typescript
// Get current state (non-reactive)
const state = useBearStore.getState()

// Update state
useBearStore.setState({ bears: 5 })

// Subscribe to changes
const unsub = useBearStore.subscribe((state) => console.log(state))
unsub() // unsubscribe
typescript
// 获取当前状态（非响应式）
const state = useBearStore.getState()

// 更新状态
useBearStore.setState({ bears: 5 })

// 订阅状态变化
const unsub = useBearStore.subscribe((state) => console.log(state))
unsub() // 取消订阅

Vanilla Store (No React)

原生Store（无需React）

typescript
import { createStore } from 'zustand/vanilla'

const store = createStore((set) => ({
  bears: 0,
  increase: (by) => set((state) => ({ bears: state.bears + by })),
}))

store.getState().bears
store.setState({ bears: 10 })
store.subscribe((state) => console.log(state))
typescript
import { createStore } from 'zustand/vanilla'

const store = createStore((set) => ({
  bears: 0,
  increase: (by) => set((state) => ({ bears: state.bears + by })),
}))

store.getState().bears
store.setState({ bears: 10 })
store.subscribe((state) => console.log(state))

Additional Documentation

更多文档

  • Middleware: See references/middleware.md for persist, devtools, immer
  • Patterns: See references/patterns.md for slices, testing, best practices
  • TypeScript: See references/typescript.md for advanced typing patterns
  • 中间件：查看 references/middleware.md 了解persist、devtools、immer等中间件的使用
  • 模式：查看 references/patterns.md 了解切片、测试、最佳实践等内容
  • TypeScript：查看 references/typescript.md 了解高级类型定义模式

Key Patterns

核心模式

PatternWhen to Use
Single selectorOne piece of state needed
useShallow
Multiple values, avoid rerenders
getState()
Outside React, event handlers
subscribe()
External systems, logging
Vanilla storeNon-React environments
模式使用场景
单个选择器仅需要单一状态时
useShallow
需要多个值，避免不必要的重渲染时
getState()
在React外部、事件处理程序中使用时
subscribe()
集成外部系统、日志记录时
原生Store非React环境中使用时