从Redux到Zustand：React状态管理的优雅演进

引言

在React开发中，状态管理一直是核心挑战之一。Redux作为经典解决方案，虽然功能强大，但繁琐的样板代码和复杂的概念常常让开发者望而却步。近年来，轻量级状态管理库Zustand异军突起，以其简洁的API和出色的性能受到广泛关注。

Zustand简介

Zustand是由Poimandres（前身为React-Spring团队）开发的轻量级状态管理库，它基于Hooks API，提供了简洁直观的状态管理方案。

核心特点

• 🌟 极简API：无需繁琐的配置，几行代码即可创建功能完善的状态管理
• 🔗 Hooks原生支持：完美契合React的函数式编程范式
• 🚫 无需Provider包裹：简化组件树结构，避免不必要的嵌套
• ⚡ 内置性能优化：自动避免不必要的重渲染
• 🧩 丰富的中间件：支持持久化、日志、撤销/重做等高级功能

快速上手

安装

npm install zustand
# 或
yarn add zustand

创建Store

import { create } from 'zustand'

// 创建store
const useBearStore = create((set) => ({
  // 状态
  bears: 0,
  // 操作方法
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
}))

代码思路与讲解

核心步骤如下：

1. 从'zustand'导入create函数，这是创建store的入口
2. 调用create函数，传入一个初始化函数
3. 初始化函数接收set方法作为参数，用于更新状态
4. 返回一个包含状态和操作方法的对象

状态设计采用了扁平化结构，直接定义状态变量(bears)和对应的操作方法(increasePopulation、removeAllBears)。set方法有两种使用方式：

• 直接传入新状态对象：如removeAllBears中使用set({ bears: 0 })
• 传入函数，接收当前状态并返回新状态：如increasePopulation中使用set(state => ({ bears: state.bears + 1 }))

函数式更新更安全，尤其适合基于当前状态计算新值的场景，避免了状态更新可能带来的竞态问题。命名上采用useXXXStore的 convention，符合React Hooks的命名规范，便于在组件中使用。

在组件中使用

// 读取状态
function BearCounter() {
  // 只订阅bears状态，只有当bears变化时才会重渲染
  const bears = useBearStore((state) => state.bears)
  return <h1>🐻 {bears} around here ...</h1>
}

// 更新状态
function Controls() {
  const increasePopulation = useBearStore((state) => state.increasePopulation)
  const removeAllBears = useBearStore((state) => state.removeAllBears)
  return (
    <div>
      <button onClick={increasePopulation}>增加熊数量</button>
      <button onClick={removeAllBears}>重置</button>
    </div>
  )
}

代码思路与讲解

这段代码展示了如何在React组件中使用Zustand store，体现了Zustand的核心优势：

1. 精准订阅：通过传入选择器函数(state => state.bears)，组件只订阅所需的特定状态

   • 当bears状态变化时，BearCounter组件会重渲染
   • 如果store中的其他状态变化，BearCounter不会重渲染
   • 这种细粒度的订阅机制避免了不必要的重渲染，提升应用性能

2. 简洁的API：直接调用useBearStore hook即可访问store中的状态和方法，无需像Redux那样使用connect高阶组件或useSelector/useDispatch

3. 组件解耦：组件不需要知道状态的具体来源和更新方式，只需要关注如何使用状态和调用方法

4. 灵活的组合：可以在多个组件中分别使用useBearStore获取所需的状态和方法，实现状态在组件间的共享

这种设计使组件代码更加简洁，关注点更加清晰，同时也降低了组件与状态管理逻辑的耦合度。

与Redux深度对比

特性	Zustand	Redux
API复杂度	⭐⭐⭐⭐⭐ 极简	⭐⭐⭐ 较复杂
样板代码量	极少	较多
Provider依赖	❌ 无需	✅ 必须
学习曲线	平缓	陡峭
性能优化	内置优化	需要额外配置reselect
中间件支持	原生支持	需要额外库
社区生态	成长中	成熟完善
适用场景	中小型应用、快速开发	大型复杂应用

Zustand的优势

• 简洁高效：摆脱Redux中action、reducer、dispatch等繁琐概念
• 更低的学习成本：接近React原生Hooks的使用体验，开发者可以快速上手
• 更好的性能：内置的选择器记忆化减少不必要的重渲染
• 灵活的Store设计：支持多Store组合，实现模块化状态管理

Redux的优势

• 成熟稳定：经过多年实战检验，适合大型复杂应用
• 丰富的中间件：如redux-thunk、redux-saga等生态完善
• 严格的状态流程：强制的单向数据流使状态变化可预测
• 强大的开发工具：Redux DevTools提供时间旅行调试等高级功能

高级用法

异步操作

const useBearStore = create((set) => ({
  bears: 0,
  // 异步action
  fetchBears: async () => {
    const response = await fetch('/api/bears')
    const data = await response.json()
    set({ bears: data.count })
  },
}))

代码思路

Zustand对异步操作的支持非常自然，直接在store中定义异步方法即可：

1. 定义一个async函数fetchBears，使用async/await语法处理异步逻辑
2. 在函数内部执行API请求(fetch('/api/bears'))
3. 解析响应数据(response.json())
4. 使用set方法更新状态(set({ bears: data.count }))

相比Redux需要额外使用redux-thunk或redux-saga等中间件才能处理异步操作，Zustand的异步处理方式更加直观简洁，符合JavaScript原生的异步编程模式。这种设计降低了异步状态管理的复杂度，使开发者可以专注于业务逻辑而非工具使用。

状态持久化

import { persist } from 'zustand/middleware'

// 使用persist中间件实现状态持久化
const useBearStore = create(
  persist(
    (set) => ({
      bears: 0,
      increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
    }),
    {
      name: 'bear-storage', // localStorage的key
      getStorage: () => sessionStorage, // 可选，默认是localStorage
    }
  )
)

代码思路

在这里展示了如何使用Zustand的persist中间件实现状态持久化。中间件是Zustand的重要特性，用于扩展store功能：

1. 从'zustand/middleware'导入persist中间件
2. 将create函数的参数用persist包裹，形成中间件链
3. persist接收两个参数：原始初始化函数和配置对象
4. 配置对象中name属性指定存储的key，getStorage可选，用于指定存储位置

默认情况下，persist使用localStorage作为存储介质，页面刷新后状态不会丢失。通过getStorage: () => sessionStorage可以切换到sessionStorage，适合临时存储场景。

使用persist中间件后，状态的更新会自动同步到存储中，读取时会从存储中恢复。这种设计非常优雅，开发者无需手动编写localStorage.getItem和localStorage.setItem代码，大大简化了持久化逻辑。

多Store组合

// 用户Store
const useUserStore = create((set) => ({
  user: null,
  login: (userData) => set({ user: userData }),
  logout: () => set({ user: null }),
}))

// 购物车Store
const useCartStore = create((set) => ({
  items: [],
  addItem: (item) => set((state) => ({ items: [...state.items, item] })),
}))

// 组件中分别使用
function Profile() {
  const user = useUserStore((state) => state.user)
  const items = useCartStore((state) => state.items)
  // ...
}

代码思路与讲解

这段代码展示了Zustand的多Store设计模式，这是Zustand相比Redux的一大优势：

1. 按业务领域划分多个独立的store：用户相关状态(useUserStore)和购物车相关状态(useCartStore)
2. 每个store独立创建，拥有自己的状态和操作方法
3. 在组件中根据需要导入并使用不同的store

这种设计遵循了关注点分离原则，使状态管理更加模块化：

• 不同业务领域的状态互不干扰，降低耦合
• 每个store可以独立维护和测试
• 组件只订阅所需的store，减少不必要的重渲染
• 应用状态逻辑分散在多个小store中，比单一store更易于维护

相比Redux通常使用单一store配合复杂的reducer拆分，Zustand的多store设计更加直观和灵活，特别适合中大型应用的状态管理。

状态设计原则

• 最小状态原则：只存储组件间共享的状态，本地组件状态应使用useState
• 模块化Store：按业务领域划分多个Store，避免单一Store过于庞大
• 状态归一化：避免深层嵌套，保持状态扁平化，便于更新和查询
• 不可变性：虽然Zustand没有强制要求，但保持状态不可变有助于跟踪状态变化

性能优化技巧

• 精准订阅：始终使用选择器订阅具体状态而非整个Store，如useStore(state => state.bears)而非useStore()
• 避免不必要的状态更新：使用函数式更新，确保基于最新状态计算新值
• 合理使用中间件：只在需要时添加中间件，避免不必要的性能开销
• 复杂计算缓存：对于复杂的派生状态，考虑使用createSelector创建记忆化选择器

常见误区

• 过度使用全局状态：不是所有状态都需要放入全局Store，组件本地状态应优先使用useState
• 忽略TypeScript支持：Zustand对TS有很好的支持，建议为状态和操作方法添加类型定义
• 不必要的复杂Store：保持Store简洁，业务逻辑可放入自定义Hook，Store只负责状态管理
• 选择器依赖问题：当选择器依赖外部变量时，需要使用useCallback记忆化选择器函数

总结

Zustand作为一款现代化的状态管理库，以其简洁的API、出色的性能和灵活的使用方式，为React开发者提供了Redux之外的优秀选择。它特别适合中小型应用和追求开发效率的团队，能够在保证性能的同时大幅减少样板代码。

当然，技术选型没有绝对的对错，Redux在大型复杂应用中依然有其不可替代的优势。关键是根据项目规模、团队熟悉度和业务需求做出合适的选择。

📖 参考资料

• Zustand官方文档
• Redux官方文档
• Zustand GitHub仓库