SuperAPI AI 工具集

state-management-expert

前端与建站

查看项目

更新于 10-16 10:47

技能介绍

用途

State Management Expert 是一个用于前端状态管理的专家技能,目标是在审查或编写代码时,统一套用关于 MobX、Redux、Zustand 以及响应式模式的实践准则。该技能由 11 个独立子技能整合而成,涵盖 MobX 与 Redux 两大方向。

主要能力

MobX 相关准则

  • 遵循 MobX 最佳实践,以实现可扩展的状态管理。
  • 依赖注入:为 store 实现适当的依赖注入。
  • DevTools:利用 MobX DevTools 进行调试。
  • mobx-react-lite:在函数组件中使用 mobx-react-lite 以获得最佳性能。
  • reaction:使用 reaction 处理基于 observable 变化的副作用。
  • Store 实现:实现用于管理应用状态的 store;利用 computed values 处理派生状态;使用 actions 修改 observable 状态;在异步 action 中实现适当的错误处理。
  • 严格模式:为 MobX 实现严格模式以便更好地调试。

Redux 相关准则

  • 异步 action:使用 createAsyncThunk 处理异步 action;在异步操作中实现适当的错误处理。
  • DevTools 调试:使用 Redux DevTools 进行调试。
  • 目录结构:遵循如下结构——src/ 下的 components/、features/、store/(含 slices/、hooks.ts、store.ts)、types/、utils/。
  • Redux Toolkit 最佳实践:使用 Redux Toolkit 进行高效的 Redux 开发;使用 slice 模式组织 Redux 代码;使用 createAsyncThunk 处理异步 action;使用 selectors 在组件中访问状态;在组件中使用 Redux hooks(useSelector、useDispatch);遵循 Redux 风格指南的命名约定。

整合的子技能

该专家技能整合了 11 个独立技能:mobx-best-practices、mobx-dependency-injection、mobx-devtools、mobx-react-lite-usage、mobx-reaction-usage、mobx-store-implementation、mobx-strict-mode、redux-async-actions、redux-devtools-debugging、redux-folder-structure、redux-toolkit-best-practices。

记忆协议

资料中标注了强制性的 Memory Protocol:开始前执行 cat .claude/context/memory/learnings.md,完成后记录任何新发现的模式或例外,并假设上下文可能被重置(若未写入记忆则视为未发生)。

使用方式

在审查或编写代码时应用上述准则。资料中未提供具体的安装命令、配置步骤或调用示例。

适用场景

适用于使用或计划使用 MobX、Redux(含 Redux Toolkit)进行状态管理的代码审查与开发工作,尤其是需要统一命名约定、目录结构与异步处理方式的项目。

限制

资料仅列出各项准则与子技能名称,未提供具体的版本要求、兼容性信息、价格或收费方式、平台限制及实际效果说明,这些内容暂未提供。