登录你一般用哪些状态管理库？别担心，Zustand和Redux就能说个10分钟
Zustand 与 Redux：现代前端状态管理的两种路径
在构建复杂的 React 应用时，组件之间的状态共享是一个绕不开的问题。随着页面层级加深、交互逻辑增多，单纯依赖 props 传递或 useState 管理状态很快就会变得难以维护。这时，开发者便需要一个更高效的解决方案——状态管理库。
状态管理库的核心作用，是将分散在多个组件中的共享状态集中管理，实现跨组件通信、状态同步和可预测更新。目前，Redux 和 Zustand 是 React 生态中最主流的两个选择。它们目标一致，但设计哲学截然不同。
Redux：可预测的“状态中心”
Redux 是最早流行起来的状态管理方案，其核心理念是“单一数据源”和“不可变更新”。它通过 Action → Reducer → Store 的模式，确保每一次状态变化都清晰可追溯。
为了降低使用门槛，官方推出了 Redux Toolkit（RTK），极大简化了传统 Redux 的样板代码。我们来看一个购物车功能的实现：
// 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;
// store/store.js
import { configureStore } from '@reduxjs/toolkit';
import cartReducer from './cartSlice';
export const store = configureStore({
reducer: {
cart: cartReducer
}
});
在组件中使用：
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 实现如下：
// 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;
组件中使用更加直接：
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 代表了状态管理的两种路径：一种是严谨规范的“中心化治理”，一种是灵活自由的“去中心化协作”。它们没有绝对的优劣，只有适配与否。
技术的演进，不是为了制造复杂，而是为了在复杂中寻找秩序。状态管理库的存在，正是为了让开发者从琐碎的状态同步中解放出来，专注于业务本身——这才是其真正的价值所在。
