当前位置：首页 > news >正文

前端技术16-Redux太复杂？从Redux到Zustand：我们的状态管理代码减少了70%，极简API、零样板代码的状态管理方案

news 2026/6/16 12:02:42

1、AI程序员系列文章
2、AI面试系列文章
3、AI编程系列文章

开篇：状态管理的痛，谁懂？

你是否遇到过Redux需要写大量样板代码，action、reducer、store层层嵌套，简单状态管理变得复杂的痛苦场景？状态管理本该简单，却被Redux搞得繁琐。网上搜到的Zustand教程要么太零散，要么没有深入实战。本文将从原理到实战，给出一个零成本上手方案，包含完整代码和避坑指南。

💡效率技巧：Zustand的德语意思是"状态"，作者取这个名字就是想说——状态管理，本该如此简单。

Zustand是什么？

Zustand是一个轻量级的React状态管理库，由Poimandres团队开发。它的核心理念是：用最少的代码，做最多的事。

包体积对比

Redux + React-Redux: ~14KB (gzipped) MobX + MobX-React: ~18KB (gzipped) Recoil: ~21KB (gzipped) Zustand: ~1KB (gzipped) ← 就是这家伙！

1KB是什么概念？比一张表情包还小！但功能却一点不打折扣。

架构图

┌─────────────────────────────────────────────────────────────┐ │ React Component Tree │ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ │ │ Component A │ │ Component B │ │ Component C │ │ │ │ useStore() │ │ useStore() │ │ useStore() │ │ │ └──────┬──────┘ └──────┬──────┘ └──────┬──────┘ │ │ │ │ │ │ │ └────────────────┼────────────────┘ │ │ ▼ │ │ ┌─────────────────────┐ │ │ │ Zustand Store │ │ │ │ ┌───────────────┐ │ │ │ │ │ State │ │ │ │ │ │ { count: 0 } │ │ │ │ │ └───────────────┘ │ │ │ │ ┌───────────────┐ │ │ │ │ │ Actions │ │ │ │ │ │ increment() │ │ │ │ │ │ decrement() │ │ │ │ │ └───────────────┘ │ │ │ └─────────────────────┘ │ └─────────────────────────────────────────────────────────────┘

🎭幽默时刻：Redux就像一个西装革履的英国管家，做事规矩但流程繁琐；Zustand则像你的室友，随叫随到，简单粗暴但极其高效。

核心特性解析

1. 极简API设计

Redux写法（样板代码地狱）：

// actionTypes.ts const INCREMENT = 'INCREMENT'; const DECREMENT = 'DECREMENT'; // actions.ts const increment = () => ({ type: INCREMENT }); const decrement = () => ({ type: DECREMENT }); // reducer.ts const counterReducer = (state = 0, action) => { switch (action.type) { case INCREMENT: return state + 1; case DECREMENT: return state - 1; default: return state; } }; // store.ts const store = createStore(counterReducer);

Zustand写法（一行搞定）：

import { create } from 'zustand'; const useStore = create((set) => ({ count: 0, increment: () => set((state) => ({ count: state.count + 1 })), decrement: () => set((state) => ({ count: state.count - 1 })), }));

代码量对比：Redux 20+行 vs Zustand 5行，减少了75%！

2. 无需Provider包裹

// 传统Context API - 需要层层包裹 function App() { return ( <ThemeProvider> <UserProvider> <CartProvider> <NotificationProvider> <YourApp /> </NotificationProvider> </CartProvider> </UserProvider> </ThemeProvider> ); } // Zustand - 直接导入使用，无需Provider function App() { return <YourApp />; // 就这么简单！ }

⚠️避坑警告：虽然Zustand不需要Provider，但如果你在服务端渲染(SSR)场景使用，仍需注意hydration问题。建议在组件挂载后再访问store。

3. 完美的TypeScript支持

import { create } from 'zustand'; interface BearState { bears: number; increase: (by: number) => void; } const useBearStore = create<BearState>((set) => ({ bears: 0, increase: (by) => set((state) => ({ bears: state.bears + by })), })); // 使用时有完整的类型提示 function BearCounter() { const bears = useBearStore((state) => state.bears); const increase = useBearStore((state) => state.increase); return ( <div> <h1>{bears} bears around here...</h1> <button onClick={() => increase(1)}>Add bear</button> </div> ); }

与Redux/Context API的对比

详细对比表

特性	Zustand	Redux	Context API
学习曲线	⭐ 极低	⭐⭐⭐⭐ 高	⭐⭐ 中等
样板代码	极少	大量	中等
包体积	~1KB	~14KB	内置
TypeScript支持	原生完美	需配置	良好
性能优化	自动	手动	需memo
中间件生态	丰富	极丰富	无
DevTools	支持	强大	无
服务端渲染	支持	支持	支持

什么时候选什么？

选Zustand：

中小型项目
快速原型开发
团队技术栈不统一
讨厌样板代码

选Redux：

超大型应用
需要复杂的状态逻辑
团队已熟悉Redux生态
需要时间旅行调试

选Context API：

主题/语言等低频更新状态
极简单的状态共享
不想引入额外依赖

🎭幽默时刻：选择状态管理库就像选择交通工具——Context API是步行（免费但慢），Redux是豪华轿车（功能全但维护贵），Zustand是电动自行车（便宜、快、刚刚好）。

实战：搭建企业级状态管理方案

项目结构

src/ ├── stores/ │ ├── index.ts # Store聚合导出 │ ├── userStore.ts # 用户状态 │ ├── cartStore.ts # 购物车状态 │ └── themeStore.ts # 主题状态 ├── hooks/ │ └── useStore.ts # 自定义hooks └── types/ └── store.types.ts # 类型定义

1. 用户状态管理

// stores/userStore.ts import { create } from 'zustand'; import { persist } from 'zustand/middleware'; interface User { id: string; name: string; email: string; avatar?: string; } interface UserState { user: User | null; isAuthenticated: boolean; isLoading: boolean; error: string | null; // Actions login: (email: string, password: string) => Promise<void>; logout: () => void; updateProfile: (data: Partial<User>) => void; clearError: () => void; } export const useUserStore = create<UserState>()( persist( (set, get) => ({ user: null, isAuthenticated: false, isLoading: false, error: null, login: async (email, password) => { set({ isLoading: true, error: null }); try { // 模拟API调用 const response = await fetch('/api/login', { method: 'POST', body: JSON.stringify({ email, password }), }); const user = await response.json(); set({ user, isAuthenticated: true, isLoading: false }); } catch (error) { set({ error: error.message, isLoading: false }); } }, logout: () => { set({ user: null, isAuthenticated: false }); // 清除本地存储 localStorage.removeItem('user-storage'); }, updateProfile: (data) => { const currentUser = get().user; if (currentUser) { set({ user: { ...currentUser, ...data } }); } }, clearError: () => set({ error: null }), }), { name: 'user-storage', partialize: (state) => ({ user: state.user, isAuthenticated: state.isAuthenticated }), } ) );

2. 购物车状态管理

// stores/cartStore.ts import { create } from 'zustand'; import { devtools, persist } from 'zustand/middleware'; interface CartItem { id: string; name: string; price: number; quantity: number; image: string; } interface CartState { items: CartItem[]; isOpen: boolean; // Getters (computed) totalItems: () => number; totalPrice: () => number; // Actions addItem: (item: Omit<CartItem, 'quantity'>) => void; removeItem: (id: string) => void; updateQuantity: (id: string, quantity: number) => void; clearCart: () => void; toggleCart: () => void; } export const useCartStore = create<CartState>()( devtools( persist( (set, get) => ({ items: [], isOpen: false, totalItems: () => { return get().items.reduce((sum, item) => sum + item.quantity, 0); }, totalPrice: () => { return get().items.reduce( (sum, item) => sum + item.price * item.quantity, 0 ); }, addItem: (item) => { const items = get().items; const existingItem = items.find((i) => i.id === item.id); if (existingItem) { set({ items: items.map((i) => i.id === item.id ? { ...i, quantity: i.quantity + 1 } : i ), }); } else { set({ items: [...items, { ...item, quantity: 1 }], }); } }, removeItem: (id) => { set({ items: get().items.filter((item) => item.id !== id), }); }, updateQuantity: (id, quantity) => { if (quantity <= 0) { get().removeItem(id); return; } set({ items: get().items.map((item) => item.id === id ? { ...item, quantity } : item ), }); }, clearCart: () => set({ items: [] }), toggleCart: () => set((state) => ({ isOpen: !state.isOpen })), }), { name: 'cart-storage', } ), { name: 'CartStore' } ) );

3. Store聚合与最佳实践

// stores/index.ts export { useUserStore } from './userStore'; export { useCartStore } from './cartStore'; // hooks/useStore.ts - 封装常用操作 import { useUserStore } from '../stores/userStore'; import { useCartStore } from '../stores/cartStore'; // 用户相关hook export const useAuth = () => { return useUserStore((state) => ({ user: state.user, isAuthenticated: state.isAuthenticated, isLoading: state.isLoading, login: state.login, logout: state.logout, })); }; // 购物车相关hook export const useCart = () => { return useCartStore((state) => ({ items: state.items, isOpen: state.isOpen, totalItems: state.totalItems(), totalPrice: state.totalPrice(), addItem: state.addItem, removeItem: state.removeItem, toggleCart: state.toggleCart, })); };

💡效率技巧：使用selector函数可以精确控制组件重渲染。只有当selector返回的值变化时，组件才会重新渲染。

// ✅ 好的做法：只订阅需要的字段 const name = useUserStore((state) => state.user?.name); // ❌ 坏的做法：订阅整个store，任何变化都会触发重渲染 const { userStore } = useUserStore();

中间件使用指南

1. 持久化中间件 (persist)

import { create } from 'zustand'; import { persist, createJSONStorage } from 'zustand/middleware'; const useStore = create( persist( (set, get) => ({ fishes: 0, addAFish: () => set({ fishes: get().fishes + 1 }), }), { name: 'food-storage', // 存储键名 storage: createJSONStorage(() => localStorage), // 默认localStorage partialize: (state) => ({ fishes: state.fishes }), // 只持久化特定字段 onRehydrateStorage: () => (state, error) => { if (error) { console.error(' hydration error:', error); } else { console.log('hydration finished'); } }, } ) );

2. 日志中间件 (logger)

import { create } from 'zustand'; import { devtools } from 'zustand/middleware'; // 自定义日志中间件 const logger = (config) => (set, get, api) => config( (args) => { console.log(' applying', args); set(args); console.log(' new state', get()); }, get, api ); const useStore = create( logger((set) => ({ bees: false, setBees: (input) => set({ bees: input }), })) );

3. DevTools中间件

import { create } from 'zustand'; import { devtools } from 'zustand/middleware'; const useStore = create( devtools( (set) => ({ count: 0, increment: () => set((state) => ({ count: state.count + 1 })), }), { name: 'MyStore', enabled: process.env.NODE_ENV === 'development', } ) );

⚠️避坑警告：在生产环境务必关闭DevTools，避免性能开销和潜在的安全风险。

4. 自定义中间件组合

import { create } from 'zustand'; import { devtools, persist, subscribeWithSelector } from 'zustand/middleware'; const useStore = create( devtools( persist( subscribeWithSelector((set, get) => ({ // your state })), { name: 'my-storage' } ), { name: 'MyStore' } ) );

🎭幽默时刻：中间件就像火锅蘸料——persist是芝麻酱（基础必备），devtools是辣椒油（开发时爽），logger是蒜泥（调试时香）。按口味自由搭配！

TypeScript集成最佳实践

1. 完整的类型定义

// types/store.types.ts import { StateCreator } from 'zustand'; // 基础状态接口 export interface BaseState { isLoading: boolean; error: string | null; setLoading: (loading: boolean) => void; setError: (error: string | null) => void; } // 用户状态 export interface UserState extends BaseState { user: User | null; isAuthenticated: boolean; login: (credentials: LoginCredentials) => Promise<void>; logout: () => void; } // Store创建器类型 export type StoreCreator<T> = StateCreator< T, [['zustand/devtools', never], ['zustand/persist', unknown]], [], T >;

2. 切片模式 (Slices Pattern)

大型应用推荐将store拆分为多个切片：

// stores/slices/createUserSlice.ts import { StateCreator } from 'zustand'; export interface UserSlice { user: User | null; setUser: (user: User | null) => void; } export const createUserSlice: StateCreator< UserSlice, [], [], UserSlice > = (set) => ({ user: null, setUser: (user) => set({ user }), }); // stores/slices/createCartSlice.ts export interface CartSlice { items: CartItem[]; addItem: (item: CartItem) => void; } export const createCartSlice: StateCreator< CartSlice, [], [], CartSlice > = (set) => ({ items: [], addItem: (item) => set((state) => ({ items: [...state.items, item] })), }); // stores/useBoundStore.ts - 组合所有切片 import { create } from 'zustand'; import { createUserSlice, UserSlice } from './slices/createUserSlice'; import { createCartSlice, CartSlice } from './slices/createCartSlice'; export const useBoundStore = create<UserSlice & CartSlice>()((...a) => ({ ...createUserSlice(...a), ...createCartSlice(...a), }));

3. 异步Action类型安全

import { create } from 'zustand'; interface AsyncState<T> { data: T | null; isLoading: boolean; error: Error | null; } type AsyncAction<T, Args extends unknown[]> = ( ...args: Args ) => Promise<void>; interface DataStore<T> extends AsyncState<T> { fetchData: AsyncAction<T, [url: string]>; } function createAsyncStore<T>() { return create<DataStore<T>>((set) => ({ data: null, isLoading: false, error: null, fetchData: async (url) => { set({ isLoading: true, error: null }); try { const response = await fetch(url); const data = await response.json(); set({ data, isLoading: false }); } catch (error) { set({ error: error as Error, isLoading: false }); } }, })); } // 使用 const useUserStore = createAsyncStore<User>();

性能优化技巧

1. 精确选择器

// ✅ 精确选择 - 只有count变化时才重渲染 const count = useStore((state) => state.count); // ❌ 粗糙选择 - 任何状态变化都会触发重渲染 const state = useStore();

2. 使用shallow进行对象比较

import { shallow } from 'zustand/shallow'; // ✅ 使用shallow比较对象/数组 const [nuts, honey] = useBearStore( (state) => [state.nuts, state.honey], shallow ); // 或使用自定义比较函数 const customCompare = (a, b) => JSON.stringify(a) === JSON.stringify(b);

3. 分离Store

// 不要创建一个巨型store const useGiantStore = create((set) => ({ user: {}, // 经常变化 theme: {}, // 很少变化 cart: {}, // 经常变化 settings: {}, // 很少变化 })); // ✅ 拆分成多个小store const useUserStore = create(...); const useThemeStore = create(...); const useCartStore = create(...); const useSettingsStore = create(...);

4. 订阅模式

import { useEffect } from 'react'; import { useStore } from './store'; // 在组件外订阅状态变化 const unsubscribe = useStore.subscribe( (state) => state.count, (count, prevCount) => { console.log(`Count changed from ${prevCount} to ${count}`); } ); // 在组件中使用 function Counter() { useEffect(() => { const unsub = useStore.subscribe( (state) => state.count, (count) => { document.title = `Count: ${count}`; } ); return unsub; }, []); return <div>...</div>; }