你一般用哪些状态管理库？别担心，Zustand和Redux就能说个10分钟

Zustand 与 Redux：现代前端状态管理的两种路径

在构建复杂的 React 应用时，组件之间的状态共享是一个绕不开的问题。随着页面层级加深、交互逻辑增多，单纯依赖 props 传递或 useState 管理状态很快就会变得难以维护。这时，开发者便需要一个更高效的解决方案------状态管理库。

状态管理库的核心作用，是将分散在多个组件中的共享状态集中管理，实现跨组件通信、状态同步和可预测更新。目前，Redux 和 Zustand 是 React 生态中最主流的两个选择。它们目标一致，但设计哲学截然不同。

Redux：可预测的"状态中心"

Redux 是最早流行起来的状态管理方案，其核心理念是"单一数据源"和"不可变更新"。它通过 Action → Reducer → Store 的模式，确保每一次状态变化都清晰可追溯。

为了降低使用门槛，官方推出了 Redux Toolkit（RTK），极大简化了传统 Redux 的样板代码。我们来看一个购物车功能的实现：

js 复制代码

// store/cartSlice.js
import { createSlice } from '@reduxjs/toolkit';

const cartSlice = createSlice({
  name: 'cart',
  initialState: { items: [] },
  reducers: {
    addItem: (state, action) => {
      state.items.push(action.payload);
    },
    removeItem: (state, action) => {
      state.items = state.items.filter(item => item.id !== action.payload);
    }
  }
});

export const { addItem, removeItem } = cartSlice.actions;
export default cartSlice.reducer;

js 复制代码

// store/store.js
import { configureStore } from '@reduxjs/toolkit';
import cartReducer from './cartSlice';

export const store = configureStore({
  reducer: {
    cart: cartReducer
  }
});

在组件中使用：

jsx 复制代码

import { useSelector, useDispatch } from 'react-redux';
import { addItem } from './store/cartSlice';

function Product() {
  const cartItems = useSelector(state => state.cart.items);
  const dispatch = useDispatch();

  return (
    <div>
      <button onClick={() => dispatch(addItem({ id: 1, name: 'iPhone' }))}>
        加入购物车
      </button>
      <p>购物车数量: {cartItems.length}</p>
    </div>
  );
}

Redux 的优势在于其结构清晰、调试能力强（配合 Redux DevTools 可追踪每一次 action），非常适合大型项目和团队协作。但其缺点也很明显：即使使用 RTK，仍需定义 slice、action、reducer，代码量偏多，学习成本较高。

Zustand：极简主义的现代方案

与 Redux 的"仪式感"不同，Zustand 走向了轻量与简洁。它没有 action、没有 dispatch、不需要 Provider 包裹（Zustand 5+），只需一个 create 函数即可定义全局状态。

同样的购物车功能，用 Zustand 实现如下：

js 复制代码

// store/useCartStore.js
import { create } from 'zustand';

const useCartStore = create((set) => ({
  items: [],
  addItem: (product) => set((state) => ({ items: [...state.items, product] })),
  removeItem: (id) => set((state) => ({
    items: state.items.filter(item => item.id !== id)
  })),
  clearCart: () => set({ items: [] })
}));

export default useCartStore;

组件中使用更加直接：

jsx 复制代码

import useCartStore from './store/useCartStore';

function Product() {
  const { items, addItem } = useCartStore();

  return (
    <div>
      <button onClick={() => addItem({ id: 1, name: 'iPhone' })}>
        加入购物车
      </button>
      <p>购物车数量: {items.length}</p>
    </div>
  );
}

Zustand 的 API 极其简洁，几乎没有学习成本，适合中小型项目或快速开发。它天然支持异步操作，性能优化也做得很好（支持 selector 避免不必要渲染）。唯一的短板是调试体验不如 Redux 强大，且在大型项目中若缺乏规范，状态可能变得分散。

状态管理库的存在意义：从"能用"到"好用"

我们不禁要问：如果没有状态管理库，就不能开发复杂应用了吗？技术上讲，可以。通过 useContext + useReducer，我们也能实现全局状态共享。但问题在于可维护性。

当应用规模扩大，状态依赖复杂，手动维护 props 传递和回调函数将成为一场灾难。状态管理库的价值，正在于它提供了一套标准化的解决方案，让状态的定义、更新、监听变得统一和可预测。

它不仅仅是"让状态共享更方便"，更是工程化思维的体现------将状态视为一种资源，集中管理、统一调度、可追溯、可测试。这种模式降低了团队协作的认知成本，提升了代码的长期可维护性。

如何选择？根据项目需求做判断

选择 Redux（RTK）：如果你的项目规模大、团队成员多、业务逻辑复杂，且需要强大的调试能力（如回放用户操作），Redux 依然是最稳妥的选择。
选择 Zustand：如果你追求开发效率、希望减少样板代码、项目规模中等或以下，Zustand 是更轻快、现代的方案。

甚至，在一些项目中，两者可以共存：用 Redux 管理核心业务状态（如用户、权限），用 Zustand 管理 UI 状态（如弹窗、表单）。

结语

Zustand 与 Redux 代表了状态管理的两种路径：一种是严谨规范的"中心化治理"，一种是灵活自由的"去中心化协作"。它们没有绝对的优劣，只有适配与否。

技术的演进，不是为了制造复杂，而是为了在复杂中寻找秩序。状态管理库的存在，正是为了让开发者从琐碎的状态同步中解放出来，专注于业务本身------这才是其真正的价值所在。