# npm
npm install zustand
 
# yarn
yarn add zustand
 
# pnpm
pnpm add zustand
 
# bun
bun add zustand

// 无需全局配置，无需 Provider
// 直接创建 store 即可使用
import { create } from 'zustand'
 
const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}))

import { create } from 'zustand'
 
// 1. 创建 store：state + actions 在一个函数内
interface BearState {
  bears: number
  increase: () => void
  reset: () => void
}
 
const useBearStore = create<BearState>()((set) => ({
  bears: 0,
  increase: () => set((state) => ({ bears: state.bears + 1 })),
  reset: () => set({ bears: 0 }),
}))
 
// 2. 在组件中使用：通过 selector 订阅所需状态
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}>One more</button>
}
 
// 3. 在 React 组件树中使用（无需 Provider）
function App() {
  return (
    <>
      <BearCounter />
      <Controls />
    </>
  )
}

// 只订阅 count，其他状态变化不会触发此组件重渲染
const count = useStore((state) => state.count)

const useStore = create((set) => ({
  fetchData: async () => {
    const data = await api.getData()
    set({ data })
  },
}))

import { create } from 'zustand'
 
// 推荐：使用接口定义 store 类型
interface CounterState {
  count: number
  increment: () => void
  decrement: () => void
  reset: () => void
}
 
const useCounterStore = create<CounterState>()((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
  reset: () => set({ count: 0 }),
}))

import { create } from 'zustand'
import { devtools, persist } from 'zustand/middleware'
import type { StateCreator } from 'zustand'
 
// 定义各切片
interface BearSlice {
  bears: number
  addBear: () => void
}
 
interface FishSlice {
  fishes: number
  addFish: () => void
}
 
// 各切片独立实现
const createBearSlice: StateCreator<
  BearSlice & FishSlice,
  [['zustand/devtools', never], ['zustand/persist', unknown]],
  [],
  BearSlice
> = (set) => ({
  bears: 0,
  addBear: () => set((state) => ({ bears: state.bears + 1 })),
})
 
const createFishSlice: StateCreator<
  BearSlice & FishSlice,
  [['zustand/devtools', never], ['zustand/persist', unknown]],
  [],
  FishSlice
> = (set) => ({
  fishes: 0,
  addFish: () => set((state) => ({ fishes: state.fishes + 1 })),
})
 
// 组合切片
const useStore = create<BearSlice & FishSlice>()(
  devtools(
    persist(
      (...a) => ({
        ...createBearSlice(...a),
        ...createFishSlice(...a),
      }),
      { name: 'animal-store' }
    )
  )
)

import { act } from 'react'
import { useBearStore } from './store'
 
test('should increase bears', () => {
  // 重置 store 状态
  act(() => useBearStore.setState({ bears: 0 }))
 
  // 调用 action
  act(() => useBearStore.getState().increase())
 
  // 验证结果
  expect(useBearStore.getState().bears).toBe(1)
})

// 动态导入 store，实现代码分割
const useHeavyStore = create(() => ({
  /* 大量状态 */
}))
 
// 在组件中懒加载
const HeavyComponent = lazy(() => import('./HeavyComponent'))

// ✅ 正确：使用 selector 精确订阅
const count = useStore((state) => state.count)
 
// ✅ 正确：使用 useShallow 避免对象引用变化
import { useShallow } from 'zustand/shallow'
const { count, text } = useStore(
  useShallow((state) => ({ count: state.count, text: state.text }))
)
 
// ❌ 避免：在组件内创建新函数引用
const filtered = useStore((state) => state.items.filter(i => i.active))
// ✅ 改用：外部选择器函数
const selectActiveItems = (state) => state.items.filter(i => i.active)
const filtered = useStore(selectActiveItems)

// ✅ 只订阅需要的字段
const count = useStore((state) => state.count)
 
// ✅ 组合多个 selector
const count = useStore(useShallow((s) => s.count))
const name = useStore(useShallow((s) => s.name))
 
// ❌ 避免订阅整个 store
const store = useStore() // 任何状态变化都会触发重渲染

// ✅ 推荐：actions 和 state 在同一个 store 定义中
const useStore = create((set) => ({
  count: 0,
  increment: () => set((s) => ({ count: s.count + 1 })),
}))
 
// ❌ 避免：actions 定义在组件内部
function Counter() {
  const increment = () => useStore.setState((s) => ({ count: s.count + 1 }))
}

import { create } from 'zustand'
import { immer } from 'zustand/middleware/immer'
 
const useStore = create(
  immer((set) => ({
    users: [],
    updateUser: (id, name) =>
      set((state) => {
        const user = state.users.find((u) => u.id === id)
        if (user) user.name = name // 直接可变更新，Immer 自动生成不可变副本
      }),
  }))
)

import { create } from 'zustand'
import { persist } from 'zustand/middleware'
 
const useAuthStore = create(
  persist(
    (set) => ({
      token: null,
      setToken: (token) => set({ token }),
    }),
    {
      name: 'auth-storage',        // localStorage key
      partialize: (state) => ({    // 只持久化需要的字段
        token: state.token,
      }),
    }
  )
)

// 在 React 组件外部（如 API 拦截器、工具函数）访问 store
const token = useAuthStore.getState().token
useAuthStore.setState({ token: newToken })
 
// 订阅状态变化（如同步到其他系统）
const unsubscribe = useAuthStore.subscribe(
  (state) => state.token,
  (token) => {
    console.log('Token changed:', token)
  }
)

// ✅ 使用 useShallow 处理返回新引用的 selector
import { useShallow } from 'zustand/shallow'
const { a, b } = useStore(useShallow((s) => ({ a: s.a, b: s.b })))
 
// ✅ 保持 fallback 值引用稳定
const NOOP = () => {}
const action = useStore((s) => s.action ?? NOOP)
 
// ❌ v4 中可用但 v5 移除的写法
const data = useStore(selector, isEqual) // 自定义相等函数已移除

// 手动维护派生状态
const useStore = create((set, get) => ({
  items: [],
  activeCount: 0, // 需要手动同步
  addItem: (item) => set((s) => ({
    items: [...s.items, item],
    activeCount: s.activeCount + (item.active ? 1 : 0),
  })),
}))

// ❌ 会导致无限循环
const data = useStore((s) => [s.a, s.b])
// ✅ 必须使用 useShallow
const data = useStore(useShallow((s) => [s.a, s.b]))