Redux和Zustand的区别
直接对比
| Redux(RTK) | Zustand | |
|---|---|---|
| 学习成本 | 较高(Action/Reducer/Slice 概念多) | 极低(几乎没有模板代码) |
| 代码量 | 较多 | 极少 |
| 包体积 | 较大 | 极小(~1kb) |
| 调试工具 | Redux DevTools 非常完善 | 支持 DevTools,但弱一些 |
| 异步处理 | RTK Query / createAsyncThunk | 直接在 action 里写 async |
| 适合规模 | 中大型、团队协作 | 中小型项目 |
Zustand 写法有多简单
import { create } from "zustand";
const useCounterStore = create<{
count: number;
increment: () => void;
}>((set) => ({
count: 0,
increment: () => set((state) => ({ count: state.count + 1 })),
}));
// 组件里直接用
const { count, increment } = useCounterStore();
对比 Redux 需要 Slice + Store + Provider + useSelector + useDispatch,Zustand 简洁很多。
怎么选
- 小中型项目、追求开发效率:选 Zustand
- 大型项目、团队协作、需要严格数据流规范:选 Redux RTK
- 已有 Redux 项目:没必要迁移
