# Zustand 状态管理 ## 总结 Zustand 是一个最小的、无偏见的 React 状态管理库。没有提供者，没有样板文件——只是一个简单的基于钩子的 API，在 React 应用程序中感觉很自然。 ## 何时使用 * React 应用程序需要全局状态而不需要 Redux 复杂性 * 需要最小样板和包大小的项目 * 团队更喜欢直接状态突变而不是减速器 * 需要灵活状态水合作用的 SSR 应用程序 (Next.js) * 从 Redux/Context API 迁移到更简单的解决方案 ## 快速入门 npm 安装 zustand // 商店/useCounterStore.ts 从“zustand”导入{创建} 接口计数器状态{ 计数：数量增量：() => void 递减：() => void } 导出 const useCounterStore = create((set) => ({ 计数：0，增量： () => set((state) => ({ count: state.count + 1 })), 递减： () => set((state) => ({ count: state.count - 1 })), }）） // 组件/Counter.tsx 从 '@/stores/useCounterStore' 导入 { useCounterStore } 导出函数 Counter() { const { 计数、递增、递减 } = useCounterStore() 返回（

计数：{count}

） } ** ** # 完整的 Zustand 指南 ## 核心概念 ### 商店创建从“zustand”导入{创建} // 基本存储接口 BearState { 熊：数量 addBear: () => 无效 } const useBearStore = create((set) => ({ 熊：0， addBear: () => set((state) => ({ bears: state.bears + 1 })), }）） // 存储并获取访问权限 const useStore = create((set, get) => ({ 计数：0，增量：() => { const currentCount = get().count 设置（{计数：当前计数+1}） }, }）） ### 状态访问模式 // 选择整个商店（任何更改都会重新呈现）常量状态 = useStore() // 选择特定字段（仅当这些更改时重新渲染） const bears = useStore((state) => state.bears) const addBear = useStore((state) => state.addBear) // 使用选择器解构 const { 熊, addBear } = useStore((state) => ({ 熊：state.bears， addBear: 状态.addBear, }）） // 多个选择器 const bears = useStore((state) => state.bears) const Fish = useStore((state) => state.fish) ### 突变接口 TodoState { 待办事项：待办事项[] addTodo: (文本: 字符串) => void 切换Todo：（id：字符串）=>无效删除Todo：（id：字符串）=>无效 } const useTodoStore = create((set) => ({ 待办事项：[]， // 添加项目 addTodo: (文本) => 设置((状态) => ({ todos: [...state.todos, { id: nanoid(), text, 已完成: false }] }））， // 更新项目切换Todo：（id）=>设置（（状态）=>（{ 待办事项：state.todos.map(todo => todo.id === id ? { ...todo, 已完成: !todo.completed } : 待办事项） }））， // 删除项目删除Todo：（id）=>设置（（状态）=>（{ 待办事项：state.todos.filter(todo => todo.id !== id) }））， }）） ## 反应集成 ### useStore 钩子函数 BearCounter() { // 当熊改变时重新渲染 const bears = useBearStore((state) => state.bears) 返回这里的

{bears} 熊...

} 函数控制() { // 当熊改变时不重新渲染 const addBear = useBearStore((state) => state.addBear) return } ### 浅比较从 'zustand/shallow' 导入 {shallow} // 当对象标识更改但值没有更改时防止重新渲染 const { 坚果，蜂蜜 } = useBearStore( (state) => ({ 坚果: state.nuts, 蜂蜜: state.honey }), 浅） // 自定义相等函数 const treats = useBearStore( （状态）=>状态.治疗， (上一个, 下一个) => 上一个.length === 下一个.length ） ### 外部 React 组件 // 读取状态 const count = useStore.getState().count // 订阅更改 const 取消订阅 = useStore.subscribe( (state) => console.log('计数已更改：', state.count) ） // 更新状态 useStore.setState({ 计数: 42 }) // 使用函数更新 useStore.setState((state) => ({ count: state.count + 1 })) ## TypeScript 模式 ### 类型商店创建接口用户状态{ 用户：用户 |空 setUser: (用户: 用户) => void 清除用户：() => 无效 } const useUserStore = create((set) => ({ 用户：空， setUser：（用户）=>设置（{用户}），清除用户：（）=>设置（{用户：空}）， }）） // 类型推断会自动进行 const user = useUserStore((state) => state.user) // 用户 |空 ### 商店类型推断 // 提取存储类型 type UserStoreState = ReturnType // 选择器类型助手类型 Selector = (状态: UserState) => T const selectUsername: 选择器<字符串 |未定义> =（状态）=> 状态.用户?.名称 ### 合并多个商店 // 类型安全存储组合函数 useHybridStore( 选择器1：（状态：State1）=> T，选择器2：（状态：State2）=> U ): [T, U] { 返回[ useStore1(选择器1), useStore2(选择器2), ] } const [用户，主题] = useHybridStore( (s) => s.user, (s) => s.主题） ## 切片模式 ### 创建切片 // authSlice.ts 导出接口 AuthSlice { 用户：用户 |空登录：（凭证：凭证）=> Promise 注销：() => 无效 } 导出 const createAuthSlice: StateCreator< AuthSlice 和 TodoSlice, [], [], 验证切片 > =（设置）=>（{ 用户：空，登录：异步（凭据）=> { const user =等待 api.login(凭证) 设置（{用户}） }, 注销: () => set({ user: null }), }) // todoSlice.ts 导出接口 TodoSlice { 待办事项：待办事项[] addTodo: (文本: 字符串) => void } 导出 const createTodoSlice: StateCreator< AuthSlice 和 TodoSlice, [], [], 待办事项切片 > =（设置）=>（{ 待办事项：[]， addTodo: (文本) => 设置((状态) => ({ todos: [...state.todos, { id: nanoid(), text, 已完成: false }] }））， }) // 商店.ts 从“zustand”导入{创建} 从 './authSlice' 导入 { createAuthSlice, AuthSlice } 从 './todoSlice' 导入 { createTodoSlice, TodoSlice } 导出 const useStore = create()((...a) => ({ ...createAuthSlice(...a), ...createTodoSlice(...a), }）） ### 跨切片通信导出 const createTodoSlice: StateCreator< AuthSlice 和 TodoSlice, [], [], 待办事项切片 > = (设置, 获取) => ({ 待办事项：[]，添加待办事项：（文本）=> { // 访问其他切片的状态 const user = get().user if (!user) 抛出新错误('未通过身份验证') 设置（（状态）=>（{ 待办事项: [...state.todos, { id: 纳米机器人(), 文字，用户ID：用户ID，已完成：假 }] }）） }, }) ## 中间件 ### 持久化中间件从“zustand”导入{创建} 从 'zustand/middleware' 导入 { persist, createJSONStorage } 接口首选项状态{ 主题：“光”| “黑暗” 语言：字符串 setTheme: (主题: '浅色' | '深色') => void } 导出 const usePreferencesStore = create()( 坚持（（设置）=>（{ 主题：“光”，语言: 'en', setTheme: (主题) => set({ 主题 }), }), { name: 'preferences-storage', // localStorage 键存储：createJSONStorage(() => localStorage), // 部分持久化部分化：（状态）=>（{主题：状态.主题}）， // 版本间迁移版本：1，迁移：（persistedState：任何，版本：数字）=> { 如果（版本=== 0）{ // 从 v0 迁移到 v1 persistedState.language = 'en' } 返回 persistedState 作为 PreferencesState }, } ）） // 自定义存储（例如 React Native 的 AsyncStorage）常量自定义存储 = { getItem: async (name: string) => { const value =等待AsyncStorage.getItem（名称）返回值？？空 }, setItem: async (名称: 字符串, 值: 字符串) => { 等待 AsyncStorage.setItem(名称，值) }, 删除项目：异步（名称：字符串）=> { 等待 AsyncStorage.removeItem(名称) }, } 常量 useStore = 创建( 坚持（ (设置) => ({ /* ... */ }), { name: '应用程序存储', 存储：createJSONStorage(() => customStorage) } ）） ### 开发工具中间件从 'zustand/middleware' 导入 { devtools } 接口计数器状态{ 计数：数量增量：() => void } const useCounterStore = create()( 开发工具（（设置）=>（{ 计数：0，增量： () => set((state) => ({ count: state.count + 1 }), false, '增量'), }), { 名称：'柜台商店'，启用：process.env.NODE_ENV === '开发' } ）） // Redux DevTools 中的操作名称 set({ 计数: 42 }, false, 'setCount') set((state) => ({ count: state.count + 1 }), false, { type: 'increment', amount: 1 }) ### 沉浸式中间件从 'zustand/middleware/immer' 导入 { immer } 接口 TodoState { 待办事项：待办事项[] addTodo: (文本: 字符串) => void 切换Todo：（id：字符串）=>无效 } const useTodoStore = create()( 浸入器（（设置）=>（{ 待办事项：[]， // 直接使用 Immer 改变状态 addTodo: (文本) => 设置((状态) => { state.todos.push({ id: nanoid(), text, 完成: false }) }), 切换Todo：（id）=>设置（（状态）=>{ const todo = state.todos.find(t => t.id === id) if (todo) todo.completed = !todo.completed }), }））） ### 组合中间件 const useStore = create<状态>()( 开发工具（坚持（浸入器（（设置）=>（{ // 存储实现 }））， { name: '应用程序存储' } ), { 名称： '应用商店' } ）） ## 异步操作和 API 集成 ### 基本异步操作接口用户状态{ 用户：用户[] 加载：布尔值错误：字符串|空 fetchUsers: () => Promise } const useUserStore = create((set) => ({ 用户：[]，加载：假，错误：空， fetchUsers: async () => { 设置（{加载：true，错误：null}）尝试{ const 用户 = 等待 api.getUsers() 设置（{用户，加载：假}） } 捕获（错误）{ set({ 错误: error.message, 加载: false }) } }, }）） ### 乐观更新接口 TodoState { 待办事项：待办事项[] addTodo: (文本: 字符串) => Promise } const useTodoStore = create((set, get) => ({ 待办事项：[]， addTodo：异步（文本）=> { const tempId = `temp-${Date.now()}` const optimisticTodo = { id: tempId, text, 完成: false } // 乐观添加设置（（状态）=>（{todos：[...state.todos，optimisticTodo]}））尝试{ const saveTodo = 等待 api.createTodo(text) // 将 temp 替换为真正的待办事项设置（（状态）=>（{ 待办事项：state.todos.map(t => t.id === tempId ？已保存待办事项：t ） }）） } 捕获（错误）{ // 出错时回滚设置（（状态）=>（{ 待办事项：state.todos.filter(t => t.id !== tempId) }））抛出错误 } }, }）） ### 请求重复数据删除接口数据状态{ 数据：数据|空加载：布尔值 fetchData: () => Promise } 让 currentRequest: Promise |空=空 const useDataStore = create((set) => ({ 数据：空，加载：假， fetchData: async () => { // 如果正在进行则返回现有请求 if (currentRequest) 返回 currentRequest 设置（{加载：true}）当前请求 = api.getData() .then((数据) => { 设置（{数据，加载：假}） }) .catch((错误) => { 设置（{加载：假}）抛出错误 }) .finally(() => { 当前请求 = null }) 返回当前请求 }, }）） ## 计算值（选择器） ### 基本选择器接口 TodoState { 待办事项：待办事项[] } // 使用 useCallback 或外部组件进行记忆 const selectCompletedCount = (状态: TodoState) => state.todos.filter(t => t.completed).length const selectActiveCount = (状态: TodoState) => state.todos.filter(t => !t.completed).length 函数 TodoStats() { const CompletedCount = useTodoStore(selectCompletedCount) const activeCount = useTodoStore(selectActiveCount) 返回

{completedCount} / {activeCount + CompletedCount}

} ### 存储中的派生状态接口 TodoState { 待办事项：待办事项[] 完成(): Todo[] 激活(): Todo[] 获取统计信息（）：{ 总数：数量；已完成：数量；活动：数量 } } const useTodoStore = create((set, get) => ({ 待办事项：[]，完成（）{ 返回 get().todos.filter(t => t.completed) }, 变得活跃（）{ 返回 get().todos.filter(t => !t.completed) }, 获取统计数据（）{ const todos = get().todos 返回{ 总计：todos.length，已完成：todos.filter(t => t.completed).length, 活动：todos.filter(t => !t.completed).length, } }, }）） // 用法 const stats = useTodoStore((state) => state.stats) ### 参数化选择器 // 创建选择器工厂 const selectTodoById = (id: string) => (state: TodoState) => state.todos.find(t => t.id === id) 函数 TodoItem({ id }: { id: 字符串 }) { const todo = useTodoStore(selectTodoById(id)) 返回

{todo?.text}

} ## 性能优化 ### 订阅模式 // 订阅特定的状态变化使用效果（（）=> { const 取消订阅 = useTodoStore.subscribe( (状态) => 状态.todos, （待办事项）=> { console.log('待办事项更改：', todos) } ）返回取消订阅 }, []) // 使用选择器和相等性进行订阅 const 取消订阅 = useTodoStore.subscribe( (状态) => state.todos.length, (length) => console.log('待办事项计数:', length), { equalFn: (a, b) => a === b } ） ### 暂时更新 // 不触发订阅者的更新接口擦洗状态{ 位置: 号码 updatePosition: (pos: 数字) => void } const useScrubbingStore = create((set) => ({ 位置：0， updatePosition: (pos) => set({position: pos }, true), // true = 瞬态 }）） // 订阅者不会收到通知 useScrubbingStore.getState().updatePosition(50) ### 批量更新 const useTodoStore = create((set) => ({ 待办事项：[]， batchUpdate: (更新: Partial[]) => { // 多次更新的单次重新渲染设置（（状态）=> { 让 newState = { ...状态 } 更新.forEach(更新=> { newState = { ...newState, ...更新 } }) 返回新状态 }) }, }）） ## 测试策略 ### 模拟商店 // __tests__/Counter.test.tsx 从“zustand”导入{创建} 从 '@testing-library/react' 导入 { render, screen, fireEvent } 从 '@/components/Counter' 导入 { Counter } 从 '@/stores/useCounterStore' 导入 { useCounterStore } // 模拟商店 jest.mock('@/stores/useCounterStore') 描述('计数器', () => { 之前（（）=> { const mockStore = create((set) => ({ 计数：0，增量： jest.fn(() => set((state) => ({ count: state.count + 1 }))), 递减：jest.fn(), }）） useCounterStore.mockImplementation(mockStore) }) it('增量计数', () => { 渲染（<计数器/>） fireEvent.click(screen.getByText('+')) Expect(screen.getByText('计数：1')).toBeInTheDocument() }) }) ### 测试实用程序 // 测试-utils.ts 从“zustand”导入{创建} 导出函数 createTestStore(initialState: Partial) { 返回 create(() => 初始状态为 T) } // 测试中的用法 const testStore = createTestStore({ 待办事项：[ { id: '1', text: '测试待办事项', 完成: false } ] }) ### 在测试之间重置存储 // 商店/useCounterStore.ts 常量初始状态 = { 计数：0 } 导出 const useCounterStore = create((set) => ({ ...初始状态，增量： () => set((state) => ({ count: state.count + 1 })), 重置：() => 设置(初始状态), }）） // __tests__/Counter.test.tsx 每个之后（（）=> { useCounterStore.getState().reset() }) ## 迁移指南 ### 来自 Redux // 还原 const counterSlice = createSlice({ 名称：'计数器'，初始状态：{值：0}，减速器：{ 增量：(state) => { state.value += 1 }, 递减： (state) => { state.value -= 1 }, }, }) // Zustand 等价 const useCounterStore = create((set) => ({ 值：0，增量： () => set((state) => ({ value: state.value + 1 })), 递减： () => set((state) => ({ value: state.value - 1 })), }）） // Redux 的使用 const 调度 = useDispatch() const value = useSelector((state) => state.counter.value) 调度（增量（）） // Zustand 用法 const { 值，增量 } = useCounterStore() 增量() ### 来自上下文 API // 上下文API const ThemeContext = createContext(null!) 导出函数 ThemeProvider({ 孩子 }: { 孩子: ReactNode }) { const [主题，setTheme] = useState<主题>('light') 返回（ {孩子} ） } 导出 const useTheme = () => useContext(ThemeContext) // Zustand 等效项（无需提供程序！）导出 const useThemeStore = create((set) => ({ 主题：“光”， setTheme: (主题) => set({ 主题 }), }）） // 使用更简单 const { 主题, setTheme } = useThemeStore() ## Next.js 集成 ### 应用程序路由器 (RSC) // 商店/useCartStore.ts 从“zustand”导入{创建} 从 'zustand/middleware' 导入 { persist } 导出 const useCartStore = create()( 坚持（（设置）=>（{ 项目：[]， addItem: (项目) => 设置((状态) => ({ 项目：[...状态.项目，项目] }））， }), { name: '购物车存储', // 跳过服务器上的持久化跳过水合作用：正确， } ）） // Components/Cart.tsx（客户端组件） “使用客户端” 从 '@/stores/useCartStore' 导入 { useCartStore } 从 'react' 导入 { useEffect } 导出函数 Cart() { const { items, addItem } = useCartStore() // 水合持续状态使用效果（（）=> { useCartStore.persist.reHydrate() }, []) 返回

{items.length} 项

} ### 服务器操作集成 // 动作/cart.ts '使用服务器' 从 'next/cache' 导入 { revalidatePath } 导出异步函数syncCartToServer(items: CartItem[]) { 等待 db.cart.upsert({ 其中：{ userId: '当前用户' }, 更新：{项目}，创建: { userId: '当前用户', items }, }) 重新验证路径（'/购物车'） } // 商店/useCartStore.ts 导出 const useCartStore = create((set) => ({ 项目：[]， addItem：异步（项目）=> { set((状态) => ({ items: [...state.items, item] })) // 同步到服务器 const items = useCartStore.getState().items 等待syncCartToServer（项目） }, }）） ### SSR 补水 // 应用程序/layout.tsx 从 '@/providers/CartStoreProvider' 导入 { CartStoreProvider } 导出默认函数 RootLayout({ Children }: { Children: ReactNode }) { 返回（ <正文> <购物车商店提供商> {孩子} ） } // 提供商/CartStoreProvider.tsx “使用客户端” 从 'react' 导入 { useRef } 从 '@/stores/useCartStore' 导入 { useCartStore } 导出函数 CartStoreProvider({ 孩子 }: { 孩子: ReactNode }) { 常量初始化 = useRef(false) if (!initialized.current) { // 如果需要，使用服务器数据进行初始化 useCartStore.setState({ items: [] }) 初始化.当前 = true } 返回<>{孩子} } ## 最佳实践 ### 商店组织 // ✅ 好：单一责任商店 const useAuthStore = create(...) const useTodoStore = create(...) const useUIStore = create(...) // ❌ 坏：神店 const useAppStore = create(...) ### 动作命名 // ✅ 好：清晰、基于动词的动作 const useStore = 创建((set) => ({ addTodo: (文本) => 设置(...), 删除Todo：（id）=>设置（...），切换Todo：（id）=>设置（...）， }）） // ❌ 不好：含糊不清或基于名词 const useStore = 创建((set) => ({ todo: (text) => set(...), // 这是做什么的？ update: (id) => set(...), // 更新什么？ }）） ### 选择器优化 // ✅ 好：特定选择器 const user = useStore((state) => state.user) const theme = useStore((state) => state.theme) // ❌ 不好：选择整个商店 const state = useStore() // 任何更改时重新渲染 ### 错误处理 // ✅ 好：显式错误状态接口状态{ 数据：数据|空加载：布尔值错误：错误|空 fetchData: () => Promise } // ❌ 不好：无声的失败 const fetchData = async () => { 尝试{ const 数据 = 等待 api.getData() 设置（{数据}） } 捕获（错误）{ // 错误被默默忽略 } } ## 常见模式 ### 加载状态接口资源状态 { 数据：T |空加载：布尔值错误：错误|空状态：“空闲”| '加载' | '成功' | ‘错误’ } 函数 createResourceStore() { 返回创建>((set) => ({ 数据：空，加载：假，错误：空，状态：'空闲'，获取：异步（）=> { set({ 加载: true, 状态: '加载', 错误: null }) 尝试{ 常量数据 = 等待 fetchData() set({ 数据, 加载: false, 状态: '成功' }) } 捕获（错误）{ 设置（{错误，加载：错误，状态：'错误'}） } }, }）） } ### 撤消/重做接口历史状态 { 过去：T[] 现在：T 未来：T[] 设置：（状态：T）=>无效撤消：() => 无效重做：() => 无效 } 函数 createHistoryStore(initialState: T) { 返回创建>((set) => ({ 过去：[]，目前：初始状态，未来：[]，设置：（newPresent）=>设置（（状态）=>（{ 过去：[...状态.过去，状态.现在]，现在：新现在，未来：[]， }）），撤消：() => 设置((状态) => { if (state.past.length === 0) 返回状态 const previous = state.past[state.past.length - 1] const newPast = state.past.slice(0, -1) 返回{ 过去：新的过去，现在：以前，未来：[状态.现在，...状态.未来]， } }), 重做：() => 设置((状态) => { if (state.future.length === 0) 返回状态常量下一个=状态.future[0] const newFuture = state.future.slice(1) 返回{ 过去：[...状态.过去，状态.现在]，当前：下一个，未来：新未来， } }), }）） } ## 与替代方案的比较 ### 与 Redux **祖斯坦优势：** * 无样板（无操作、减速器、调度） * 无需提供商 * 更小的包大小（~1kb vs~20kb） * 更简单的异步处理 * TypeScript 推理开箱即用 **Redux 优点：** * 时间旅行调试 * 更大的生态系统和中间件 * 严格的单向数据流 * 更适合非常大的应用 ### 与上下文 API **祖斯坦优势：** * 没有供应商地狱 * 更好的性能（无需重新渲染整个子树） * 更简单的API * 内置中间件 **背景优势：** * 内置于 React（无依赖） * 更适合组件本地状态 * 显式组件边界 ### vs 乔泰 **祖斯坦优势：** * 更传统的基于商店的方法 * 更适合复杂的状态逻辑 * 更轻松地从 Redux 迁移 **佐泰优势：** * 原子状态管理 * 更好的代码分割 * 更像 React（基于原子） *开箱即用的悬念支持 ## 资源 * [官方文档]() * [GitHub 存储库]() * [TypeScript 指南]() * [中间件参考]() ## 相关技能使用 Zustand 时，这些技能可以增强您的工作流程： * **react** ：Zustand 商店的 React 集成模式和挂钩 * **tanstack-query** ：服务器状态管理（与 Zustand 一起使用来管理客户端状态） * **nextjs** ：带有 Next.js 应用程序路由器和客户端组件的 Zustand * **测试驱动开发** ：测试 Zustand 存储、操作和选择器 [如果部署在您的捆绑包中，则可以获取这些技能的完整文档]

状况

包含技能