下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“react-state-management”。 如何在 Redux Toolkit 和 Zustand 之间选择？
预期结果:
对于中小型应用和简单状态需求，Zustand 提供极简的 API 和出色的 TypeScript 支持。对于需要中间件、开发工具集成和严格模式的大型企业应用，Redux Toolkit 提供结构化方案。使用 Zustand 当：你需要简单全局状态且无样板代码、偏好基于 hooks 的 API、希望最小化打包体积。使用 Redux Toolkit 当：你需要带有 thunks 的复杂异步逻辑、需要严格的动作追踪用于调试、你的团队熟悉 Redux 模式。
正在使用“react-state-management”。 设置 React Query 进行数据获取
预期结果:
安装 @tanstack/react-query，然后用 QueryClientProvider 包裹你的应用。创建带有缓存默认选项的 query client。使用 useQuery hook 进行带 key 的获取以实现缓存管理。使用 useMutation 进行更新，通过 onMutate 实现乐观更新。query key ['users', userId] 启用自动重新获取和缓存。
安全审计
安全This is a documentation skill for React state management patterns. Static analysis flagged external_commands, network, and sensitive data patterns, but evaluation confirms these are FALSE POSITIVES - the 'backticks' are TypeScript template literals in code examples, 'fetch' calls are legitimate API examples, and 'localStorage' access is proper state persistence teaching. No actual security risks identified.
中风险问题 (2)
低风险问题 (1)
风险因素
⚙️ 外部命令 (20)
质量评分
你能构建什么
新 React 项目设置
在启动新的 React 应用时选择和配置合适的状态管理方案
传统代码迁移
从旧版 Redux 模式或类组件迁移到现代状态管理方法
性能优化
在现有应用中减少不必要的重新渲染并优化状态访问模式
试试这些提示
展示如何为一个带有用户认证状态和主题切换的简单 React 应用设置 Zustand。
创建一个带有类型化 hooks 的 Redux Toolkit store，以及一个处理异步获取的用户 slice。
设置 React Query 进行用户数据获取，包含缓存、突变时的乐观更新和错误处理。
使用 Jotai atoms 实现一个购物车，包含用于计算总额的派生 atoms 和 localStorage 持久化。
最佳实践
- 分离客户端状态和服务器状态 - 使用 React Query 管理服务器数据，使用 Zustand/Redux 管理 UI 状态
- 将状态放置在靠近使用位置 - 避免将所有内容放入全局状态
- 对所有状态相关代码使用 TypeScript 以防止运行时错误并启用更好的 IDE 支持
避免
- 将服务器数据存储在全局状态而非使用 React Query - 会造成同步问题
- 过度全局化状态 - 当 useState 足够时将组件特定状态放入 Redux/Zustand
- 直接修改状态而非使用不可变更新模式 - 破坏响应性