zustand

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Zustand

Lightweight state management for React. No providers, no boilerplate. Stores are hooks.

为React打造的轻量级状态管理库。无需Provider，无需冗余模板代码。Store以Hook形式存在。

Quick start

快速开始

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 components — select only what you need
const bears = useBearStore((state) => state.bears)

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)

Critical rules

关键规则

TypeScript: Use curried form
```
create<T>()(...)
```
— required for type inference
Immutability: Treat state as immutable.
```
set
```
shallow-merges at one level only
Selectors: Always select specific fields, not the whole store. Use
```
useShallow
```
for multi-field selectors returning new references
Middleware order:
```
devtools
```
must be outermost:
```
devtools(persist(immer(...)))
```
Next.js: Create stores per-request via
```
createStore
```
+ Context, NOT global
```
create
```
Nested updates: Use Immer for deep nesting, spread operator for shallow

TypeScript： 使用柯里化形式
```
create<T>()(...)
```
— 这是类型推断的必要条件
不可变性： 将状态视为不可变数据。
```
set
```
仅在第一层进行浅合并
选择器： 始终选择特定字段，而非整个store。对于返回新引用的多字段选择器，使用
```
useShallow
```
中间件顺序：
```
devtools
```
必须处于最外层：
```
devtools(persist(immer(...)))
```
Next.js： 通过
```
createStore
```
+ Context 创建每个请求对应的store，而非全局的
```
create
```
嵌套更新： 深层嵌套使用Immer，浅层更新使用扩展运算符

When to use what

场景对应方案

Need	Solution
Basic React store	`create<T>()(...)`
Vanilla (non-React) store	`createStore` from `zustand/vanilla`
Use vanilla store in React	`useStore(store, selector)`
Auto-infer types (no interface)	`combine` middleware
Persist to localStorage	`persist` middleware
Redux DevTools	`devtools` middleware
Mutable-style updates	`immer` middleware
Subscribe to slices externally	`subscribeWithSelector` middleware
Multiple fields without rerender	`useShallow` wrapper
Large store modularization	Slices pattern with `StateCreator`
Next.js App Router	`createStore` + Context + Provider
Reset store	`set(initialState)` or `store.getInitialState()`

需求	解决方案
基础React store	`create<T>()(...)`
原生（非React）store	从 `zustand/vanilla` 导入 `createStore`
在React中使用原生store	`useStore(store, selector)`
自动推断类型（无需接口）	`combine` 中间件
持久化到localStorage	`persist` 中间件
Redux开发者工具	`devtools` 中间件
可变风格更新	`immer` 中间件
外部订阅切片	`subscribeWithSelector` 中间件
多字段无重渲染	`useShallow` 包装器
大型store模块化	结合 `StateCreator` 的切片模式
Next.js App Router	`createStore` + Context + Provider
重置store	`set(initialState)` 或 `store.getInitialState()`

References

参考资料

API reference (create, createStore, hooks, shallow): See references/apis.md
TypeScript patterns (curried create, slices, middleware typing, custom middleware): See references/typescript.md
Middlewares (persist, devtools, immer, redux, combine, subscribeWithSelector): See references/middlewares.md
Patterns & best practices (Next.js, testing, reset, auto-selectors, SSR, deep updates): See references/patterns.md

API参考（create、createStore、hooks、shallow）：查看 references/apis.md
TypeScript模式（柯里化create、切片、中间件类型、自定义中间件）：查看 references/typescript.md
中间件（persist、devtools、immer、redux、combine、subscribeWithSelector）：查看 references/middlewares.md
模式与最佳实践（Next.js、测试、重置、自动选择器、SSR、深层更新）：查看 references/patterns.md