前端状态管理 2026：Zustand 为什么越来越火

我从 2020 年开始用 Redux，一直到去年切换到 Zustand。说实话，Redux 是个好东西，但对于大部分项目来说太重了。 ## Redux 哪里让我难受 ### 样板代码太多 一个简单的状态管理，你需要写：Action Type → Action Creator → Reducer → Selector → Dispatch。Redux Toolkit 简化了不少，但依然比 Zustand 复杂。 ### 心智负担 不可变更新、中间件、thunk、saga……光是选择异步方案就能纠结半天。 ## Zustand 有多简单 ```typescript import { create } from 'zustand'; interface UserStore { user: User | null; loading: boolean; login: (username: string, password: string) => Promise; logout: () => void; } const useUserStore = create((set) => ({ user: null, loading: false, login: async (username, password) => { set({ loading: true }); const user = await api.login(username, password); set({ user, loading: false }); }, logout: () => set({ user: null }), })); // 使用 function Profile() { const user = useUserStore((s) => s.user); const logout = useUserStore((s) => s.logout); // ... } ``` 状态定义、操作、使用，就这些。没有 Provider 包裹，没有 dispatch，没有 action type。 ## Zustand 的高级功能 ### 持久化 ```typescript import { persist } from 'zustand/middleware'; const useStore = create( persist( (set) => ({ count: 0, inc: () => set((s) => ({ count: s.count + 1 })) }), { name: 'my-store' } // localStorage key ) ); ``` ### DevTools ```typescript import { devtools } from 'zustand/middleware'; const useStore = create(devtools((set) => ({ ... }))); // Redux DevTools 里直接能看 ``` ### 选择性订阅 Zustand 默认就是选择性订阅，只有你用到的状态变了才会触发重渲染。Redux 需要手动用 `useSelector` + `shallowEqual`。 ## 什么时候还是用 Redux - 团队已经很熟悉 Redux，没必要迁移 - 需要 Redux 生态里的某些中间件 - 超大型项目需要严格的状态管理规范 对于新项目，尤其是中小规模的，Zustand 基本就是最佳选择了。