Zustand：轻量级状态管理，从入门到实践

Zustand：轻量级状态管理，从入门到实践

在现代前端开发中，状态管理是一个绕不开的话题。随着应用复杂度的提升，组件间共享状态的需求变得越来越强烈。Redux、MobX 等传统方案虽然强大，但往往伴随着繁琐的样板代码和陡峭的学习曲线。

今天我们要介绍的是 Zustand ------ 一个极简、快速、可扩展的状态管理库。它基于 hooks 思想设计，API 简洁，几乎零样板代码，却能完美应对中小型应用乃至大型项目的状态管理需求。

如果说国家需要有中央银行，那么前端项目就需要中央状态管理系统。Zustand 就是这样一个"中央银行"，它将状态集中存储，并提供一套清晰的修改规则，让组件可以轻松共享和操作数据。

本文将通过两个实战案例（计数器、Todo 应用），带你从零掌握 Zustand 的核心用法，并深入理解其高级特性。

---

第一章：快速上手 Zustand --- 计数器

我们先从一个最简单的计数器开始，感受 Zustand 的简洁与强大。

1. 安装

npm install zustand
# 或
yarn add zustand

2. 创建第一个 store

在 src/store/counter.ts 中：

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

// 定义状态类型
interface CounterState {
  count: number
  increment: () => void
  decrement: () => void
  reset: () => void
}

// 创建 store
export const useCounterStore = create<CounterState>()(
  persist(
    (set) => ({
      count: 0,
      increment: () => set((state) => ({ count: state.count + 1 })),
      decrement: () => set((state) => ({ count: state.count - 1 })),
      reset: () => set({ count: 0 }),
    }),
    {
      name: 'counter', // 持久化存储的 key
    }
  )
)

代码解读：

• create<T>() 用于创建 store，返回一个自定义 hook。
• persist 是 Zustand 提供的一个中间件，可以将 store 中的数据自动持久化到 localStorage 中。
• set 函数用于更新状态，可以直接传入新状态，也可以传入一个函数接收当前状态并返回新状态。

3. 在组件中使用

在 App.tsx 中引入并使用：

import { useCounterStore } from './store/counter'

function App() {
  const { count, increment, decrement, reset } = useCounterStore()

  return (
    <div className="card">
      <button onClick={increment}>增加</button>
      <span>{count}</span>
      <button onClick={decrement}>减少</button>
      <button onClick={reset}>重置</button>
    </div>
  )
}

无需 Provider，无需 Context，直接调用 hook 即可获取状态和操作方法！ 这就是 Zustand 的魅力所在。

---

第二章：管理复杂状态 --- Todo 应用

接下来我们实现一个 Todo 列表，涵盖添加、切换完成状态、删除等功能，并使用 persist 中间件让数据持久化。

1. 定义类型

首先在 src/types/index.ts 中定义 Todo 类型：

export interface Todo {
  id: number
  text: string
  completed: boolean
}

2. 创建 Todo Store

在 src/store/todo.ts 中：

import { create } from 'zustand'
import { persist } from 'zustand/middleware'
import type { Todo } from '../types'

interface TodoState {
  todos: Todo[]
  addTodo: (text: string) => void
  toggleTodo: (id: number) => void
  removeTodo: (id: number) => void
}

export const useTodoStore = create<TodoState>()(
  persist(
    (set) => ({
      todos: [],
      addTodo: (text) =>
        set((state) => ({
          todos: [
            ...state.todos,
            {
              id: Date.now(),
              text,
              completed: false,
            },
          ],
        })),
      toggleTodo: (id) =>
        set((state) => ({
          todos: state.todos.map((todo) =>
            todo.id === id ? { ...todo, completed: !todo.completed } : todo
          ),
        })),
      removeTodo: (id) =>
        set((state) => ({
          todos: state.todos.filter((todo) => todo.id !== id)
        })),
    }),
    {
      name: 'todos', // 持久化 key
    }
  )
)

3. 在组件中使用

在 App.tsx 中添加 Todo 相关 UI：

import { useState } from 'react'
import { useTodoStore } from './store/todo'

function App() {
  const [inputValue, setInputValue] = useState('')
  const { todos, addTodo, toggleTodo, removeTodo } = useTodoStore()

  const handleAdd = () => {
    if (inputValue.trim() === '') return
    addTodo(inputValue)
    setInputValue('')
  }

  return (
    <section>
      <h2>Todo 列表 ({todos.length})</h2>
      <div>
        <input
          type="text"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
          onKeyDown={(e) => e.key === 'Enter' && handleAdd()}
          placeholder="输入待办事项"
        />
        <button onClick={handleAdd}>添加</button>
      </div>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            <input
              type="checkbox"
              checked={todo.completed}
              onChange={() => toggleTodo(todo.id)}
            />
            <span style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
              {todo.text}
            </span>
            <button onClick={() => removeTodo(todo.id)}>删除</button>
          </li>
        ))}
      </ul>
    </section>
  )
}

效果 ：添加的待办事项会立即显示，切换复选框可以划掉文字，删除按钮可移除对应项。刷新页面后数据依然存在 ------ 因为 persist 中间件已经帮我们同步到了 localStorage。

两个组合在一起的效果图

第三章：组合多个 Store 与性能优化

随着应用规模增长，我们往往会将不同领域的状态拆分到独立的 store 中。Zustand 鼓励这种模式 ------ 每个 store 都是独立的，通过自定义 hook 组合使用。

1. 在组件中同时使用多个 store

import { useCounterStore } from './store/counter'
import { useTodoStore } from './store/todo'

function App() {
  const count = useCounterStore((state) => state.count)
  const todos = useTodoStore((state) => state.todos)

  // ...
}

2. 使用 selector 优化性能

Zustand 默认会对整个 state 进行浅比较，但如果你的组件只关心部分状态，建议使用 selector 来避免不必要的渲染。

// 只选取 count，当 count 变化时才重新渲染
const count = useCounterStore((state) => state.count)

// 只选取 increment 函数（函数永远不会变，所以永远不会触发重渲染）
const increment = useCounterStore((state) => state.increment)

3. 创建组合式 Hook

如果多个 store 的状态经常一起使用，可以封装一个自定义 Hook：

import { useCounterStore } from './counter'
import { useTodoStore } from './todo'

export const useCombinedStore = () => {
  const count = useCounterStore((state) => state.count)
  const todos = useTodoStore((state) => state.todos)
  const addTodo = useTodoStore((state) => state.addTodo)

  return { count, todos, addTodo }
}

4. 在 store 中访问其他 store

有时一个 store 的 action 需要依赖另一个 store 的状态。你可以在 action 内部导入并使用其他 store 的 hook（注意避免循环依赖）。

例如，在 todo store 中添加日志，记录当前计数器值：

import { useCounterStore } from './counter'

export const useTodoStore = create<TodoState>()(
  (set, get) => ({
    // ...
    addTodo: (text) => {
      const count = useCounterStore.getState().count
      console.log('当前计数器值:', count)
      set((state) => ({
        todos: [...state.todos, { id: Date.now(), text, completed: false }]
      }))
    },
  })
)

---

第四章：中间件与高级用法

Zustand 提供了多种中间件，除了我们已使用的 persist，还有：

• devtools：与 Redux DevTools 集成，方便调试。
• subscribe：订阅状态变化。
• immer：允许以可变方式编写更新逻辑。

1. 使用 immer 简化更新

安装 immer 相关中间件：

npm install immer

然后修改 store：

import { create } from 'zustand'
import { persist } from 'zustand/middleware'
import { immer } from 'zustand/middleware/immer'

interface TodoState {
  todos: Todo[]
  addTodo: (text: string) => void
  toggleTodo: (id: number) => void
}

export const useTodoStore = create<TodoState>()(
  immer(
    persist(
      (set) => ({
        todos: [],
        addTodo: (text) =>
          set((state) => {
            state.todos.push({ id: Date.now(), text, completed: false })
          }),
        toggleTodo: (id) =>
          set((state) => {
            const todo = state.todos.find((t) => t.id === id)
            if (todo) todo.completed = !todo.completed
          }),
      }),
      { name: 'todos' }
    )
  )
)

使用 immer 后，你可以像修改可变对象一样更新状态，代码更简洁。

2. 订阅状态变化

Zustand 的 store 本身就是一个可观察对象，你可以通过 subscribe 监听变化：

const unsubscribe = useTodoStore.subscribe((state, prevState) => {
  console.log('todos 从', prevState.todos, '变为', state.todos)
})

// 取消订阅
unsubscribe()

这在需要在状态变化时触发副作用（如埋点、本地存储同步）时非常有用。

---

总结

通过本文的两个实战案例，我们完整地体验了 Zustand 的核心能力：

• 极简 API：无需繁琐的 action 类型、reducer、provider，几行代码即可创建可全局访问的状态。
• 灵活组合：可以按领域拆分成多个 store，通过 hooks 自由组合。
• 中间件生态：支持持久化、调试、不可变更新等常见需求。
• 完美集成 TypeScript：类型推导自然，开发体验极佳。

相比 Redux，Zustand 的学习成本几乎为零；相比 Context + useReducer，Zustand 避免了 Provider 嵌套和性能问题。它特别适合以下场景：

• 中小型项目，希望快速迭代
• 大型项目，需要清晰的状态边界和性能优化
• 任何需要全局共享状态，但又不想引入复杂概念的项目

希望这篇文章能帮助你快速上手 Zustand，并在实际项目中得心应手。如果你有任何问题或经验分享，欢迎在评论区留言讨论！