react-state-mgmt by alexander-kastil/agentic-sw-engineering
npx skills add https://github.com/alexander-kastil/agentic-sw-engineering --skill react-state-mgmt掌握适用于 React 应用程序的现代状态管理模式,从本地组件状态到全局存储、服务器状态同步以及复杂的数据流。
在以下情况下使用此技能:
项目要求:
| 类别 | 目的 | 解决方案 |
|---|---|---|
| 本地状态 | 组件特定的 UI 状态 | useState, useReducer |
| 全局状态 | 跨组件共享 | Redux Toolkit, Zustand, Jotai |
| 服务器状态 | 远程数据、缓存、同步 |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| React Query, SWR, RTK Query |
| URL 状态 | 路由参数、搜索 | React Router, nuqs |
| 表单状态 | 输入值、验证 | React Hook Form, Formik, Zustand |
根据应用程序复杂性和数据需求进行选择:
将 Redux Toolkit 用于具有以下特点的大型、复杂应用程序:
结构:
关键实践:
将 Zustand 用于需要以下功能的中大型应用程序:
结构:
关键实践:
将 Jotai 用于具有以下特点的应用程序:
结构:
关键实践:
使用 React Query(TanStack Query)来:
结构:
关键实践:
对于实际应用程序,组合以下方法:
优点:
首先识别状态类别:
决策树:
对于 Redux Toolkit:
对于 Zustand:
对于 Jotai:
对于 React Query:
| 问题 | 解决方案 |
|---|---|
| 不必要的重新渲染 | 使用 selectors(Redux)、自定义 hooks(Zustand)或原子订阅(Jotai);避免父级状态更改 |
| 状态未更新 | 验证 action/reducer/setter 是否已分发;检查 DevTools 中的状态变化 |
| 显示过时数据 | 增加 React Query 中的 staleTime;需要时手动使查询失效 |
| 无法序列化状态 | Redux Toolkit 具有 serializableCheck;使用中间件选项忽略某些 actions |
| 异步操作导致内存泄漏 | 取消订阅查询更改;Zustand 和 React Query 会自动处理清理 |
| TypeScript 类型错误 | 从 store 导出 RootState 和 AppDispatch 类型;为 Zustand 使用 StateCreator 泛型 |
| DevTools 未显示 | 启用 devtools 中间件;Redux、Zustand 和 Jotai 都包含 DevTools 支持 |
| 查询键不匹配 | 使用 queryKey 工厂模式;确保变更和查询之间的键结构一致 |
从旧式 Redux action creators 和 reducers 迁移:
// 迁移前
const ADD_TODO = "ADD_TODO"
const addTodo = (text) => ({ type: ADD_TODO, payload: text })
function todosReducer(state = [], action) {
switch(action.type) {
case ADD_TODO:
return [...state, { text: action.payload, completed: false }]
default:
return state
}
}
// 迁移后 - Redux Toolkit
const todosSlice = createSlice({
name: "todos",
initialState: [] as Todo[],
reducers: {
addTodo: (state, action: PayloadAction<string>) => {
state.push({ text: action.payload, completed: false })
}
}
})
export const { addTodo } = todosSlice.actions
主要改进:
每周安装次数
1
代码仓库
GitHub 星标数
3
首次出现
今天
安全审计
已安装于
amp1
cline1
trae1
opencode1
cursor1
kimi-cli1
Master modern state management patterns for React applications, from local component state to global stores, server state synchronization, and complex data flows.
Use this skill when you need to:
Project requirements:
| Category | Purpose | Solutions |
|---|---|---|
| Local State | Component-specific, UI state | useState, useReducer |
| Global State | Shared across components | Redux Toolkit, Zustand, Jotai |
| Server State | Remote data, caching, sync | React Query, SWR, RTK Query |
| URL State | Route parameters, search | React Router, nuqs |
| Form State | Input values, validation | React Hook Form, Formik, Zustand |
Choose based on application complexity and data needs:
Use Redux Toolkit for large, complex applications with:
Structure:
Key practices:
Use Zustand for medium to large apps requiring:
Structure:
Key practices:
Use Jotai for applications with:
Structure:
Key practices:
Use React Query (TanStack Query) to:
Structure:
Key practices:
For real-world applications, combine approaches:
Benefits:
Start by identifying state categories:
Decision tree:
For Redux Toolkit:
For Zustand:
For Jotai:
For React Query:
| Issue | Solution |
|---|---|
| Unnecessary re-renders | Use selectors (Redux), custom hooks (Zustand), or atom subscriptions (Jotai); avoid parent state changes |
| State not updating | Verify action/reducer/setter was dispatched; check DevTools for state changes |
| Stale data displayed | Increase staleTime in React Query; manually invalidate queries when needed |
| Cannot serialize state | Redux Toolkit has serializableCheck; use middleware options to ignore certain actions |
| Memory leaks with async | Unsubscribe from query changes; Zustand and React Query handle cleanup automatically |
| TypeScript type errors | Export RootState and AppDispatch types from store; use StateCreator generics for Zustand |
| DevTools not showing | Enable devtools middleware; Redux, Zustand, and Jotai all include DevTools support |
| Query keys not matching | Use queryKey factory pattern; ensure consistent key structure across mutations and queries |
From old-style Redux action creators and reducers:
// Before
const ADD_TODO = "ADD_TODO"
const addTodo = (text) => ({ type: ADD_TODO, payload: text })
function todosReducer(state = [], action) {
switch(action.type) {
case ADD_TODO:
return [...state, { text: action.payload, completed: false }]
default:
return state
}
}
// After - Redux Toolkit
const todosSlice = createSlice({
name: "todos",
initialState: [] as Todo[],
reducers: {
addTodo: (state, action: PayloadAction<string>) => {
state.push({ text: action.payload, completed: false })
}
}
})
export const { addTodo } = todosSlice.actions
Key improvements:
Weekly Installs
1
Repository
GitHub Stars
3
First Seen
Today
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
amp1
cline1
trae1
opencode1
cursor1
kimi-cli1
React Native 棕地迁移指南:逐步集成到原生应用(Expo/裸RN)
465 周安装