Cursor用户必看😭！别再为React状态管理头秃了，Zustand和React Query这么用才对🔥

核心功能

还在为React项目中到底该用Redux Toolkit、Zustand、Jotai还是React Query而纠结吗？每次项目开始前的技术选型会议都像一场辩论赛？别慌，这个React状态管理Skill就是你的“决策外脑”和“代码兵工厂”，它把现代React生态中最主流、最高效的状态管理方案都给你整理得明明白白。

• 方案选择困难症终结者： 清晰地告诉你什么场景下该用哪种工具，小项目用Zustand或Jotai轻装上阵，大型复杂应用选Redux Toolkit稳如泰山，重度API交互交给React Query。
• 一站式代码库： 提供从本地状态、全局状态到服务端状态的全套解决方案和代码模式。无论是设置全局共享状态、管理API数据缓存，还是实现乐观更新，都有立即可用的代码范例。
• 现代模式迁移： 包含从旧版Redux迁移到Redux Toolkit (RTK) 的实用指南，帮你平滑升级技术栈。
• 最佳实践集成： 总结了状态管理的“Do’s”和“Don’ts”，帮你从一开始就写出结构清晰、性能优越、易于维护的代码，避免掉进常见的坑。

适用平台

这些先进的React状态管理模式和代码片段，可以完美适配市面上所有主流的AI编程助手和IDE。你可以把它看作是为Cursor、GitHub Copilot、Claude Code、OpenAI Codex、Gemini Code Assist、文心快码、腾讯云CodeBuddy以及华为云CodeArts量身打造的“最强外挂”。

当你使用这些AI工具时，可以直接将本Skill中的代码模式作为上下文喂给它们，AI能立刻理解你的意图，生成高度一致且遵循最佳实践的高质量代码。这不仅能极大提升AI的上下文理解能力，更能确保整个项目的代码风格和架构统一，简直是团队协作的神仙操作！

实操代码示例

口说无凭，直接上代码！看看这些优雅的解决方案是如何解决实际问题的。

Zustand：极简主义者的选择

如果你厌倦了Redux的繁琐配置，Zustand绝对是你的宝藏。它API极简，上手超快，而且功能强大。

// store/useStore.tsnimport { create } from 'zustand'nimport { devtools, persist } from 'zustand/middleware'nninterface AppState {n  user: User | nulln  theme: 'light' | 'dark'n  setUser: (user: User | null) => voidn  toggleTheme: () => voidn}nnexport const useStore = create<AppState>()(n  devtools(n    persist(n      (set) => ({n        user: null,n        theme: 'light',n        setUser: (user) => set({ user }),n        toggleTheme: () => set((state) => ({n          theme: state.theme === 'light' ? 'dark' : 'light'n        })),n      }),n      { name: 'app-storage' }n    )n  )n)nn// 在组件中使用nfunction Header() {n  const { user, theme, toggleTheme } = useStore()n  return (n    <header className={theme}>n      {user?.name}n      <button onClick={toggleTheme}>Toggle Theme</button>n    </header>n  )n}

Redux Toolkit (RTK)：大型应用的压舱石

对于需要精细化状态管理和可预测数据流的大型应用，RTK依然是黄金标准。它通过`createSlice`和`createAsyncThunk`极大地简化了Redux的样板代码。

// store/slices/userSlice.tsnimport { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';nn// ... interface definitions ...nnconst initialState: UserState = {n  current: null,n