SuperAPI AI 工具集

ngrx-signals

前端与建站

查看项目

更新于 10-19 16:18

技能介绍

用途

ngrx-signals 用于在 Angular 项目中生成、重构和架构基于 @ngrx/signals 的 Signal Store 状态管理代码。它把 Signal Store 视为由多个 feature 组合而成的树结构,每个 feature 可贡献状态、计算信号、方法、非响应式依赖和生命周期钩子。

触发场景

当用户提到以下内容时使用该技能:

  • API 名称:signalStore、signalStoreFeature、withState、withMethods、withComputed、withHooks、withProps、withEntities、rxMethod、signalMethod、patchState、getState、signalState。
  • 希望把使用 BehaviorSubject/Subject 或含可变字段类的服务重构为 Signal Store。
  • 需要 Angular 功能/页面状态,并提及 Angular Signals 或要求“现代”方案。
  • 需要自定义 store feature(如 withRequestStatus、withSelectedEntity、withLogger)或询问如何组合 feature。
  • 涉及乐观更新、请求状态、实体集合或对 HTTP API 的 CRUD 操作。

不适用于经典 @ngrx/store(actions、reducers、effects、独立文件 selectors)、未使用 Signal Store 的 Redux DevTools 接线,或纯 RxJS 管道问题。

核心规则

  1. 状态更新统一通过 patchState(store, updater) 完成,不允许直接修改信号。updater 可以是部分对象、函数 (state) => Partial<State>,或返回上述两者的自定义 updater。
  2. Store 是 Angular provider,可通过 inject(Store) 或 TestBed.inject(Store) 注入;可在 root、路由或组件级(providers: [Store])提供,以控制作用域。
  3. 复用通过 signalStoreFeature(...) 构建自定义 feature 实现,而非类继承。

主要能力

  • 提供标准 feature store 脚手架,包含 withState、withComputed、withMethods、请求状态和异步加载示例。
  • 支持用 withEntities<T>() 管理带稳定 ID 的实体集合,替代手写 T[] 数组。
  • 支持自定义可复用 feature,并通过 { state: type<EntityState<T>>() } 声明前置条件,使误用成为编译错误。
  • 提供常见错误与正确写法的对照,例如 updateEntity 的函数式 changes、removeEntities 的谓词形式、乐观更新的 getState 快照与失败回滚、请求状态使用独立 updater 函数等。
  • 提供 BehaviorSubject 重构映射:字段→withState 状态切片、.next→patchState、.value→信号读取、combineLatest/map→withComputed、组件 | async→直接读取信号。
  • 指导异步工具选择:单次 await 调用用 async 方法;需要 RxJS 操作符(debounceTime、switchMap、retry、取消)用 rxMethod;同步且无需 RxJS 时用 signalMethod(v19+)。
  • 强调测试仅通过公共 API:TestBed.inject(Store)、用 provide: 模拟注入服务、对信号和方法效果断言。

使用方式

该技能以指导性文档形式提供,按任务类型引导阅读对应参考内容:普通 feature store 和 API 参考、实体集合、自定义 feature、架构模式(作用域、乐观更新、BehaviorSubject 重构)、测试。生成代码时要求显式 TypeScript 状态类型、显式导入、用 patchState 变更状态、HTTP 逻辑置于被 inject 的服务中、优先使用命名 updater 和 withEntities、在无需 RxJS 时优先 signalMethod。

适用场景

适用于 Angular 新功能状态设计、现有服务向 Signal Store 迁移、实体 CRUD 与乐观更新、请求状态管理、自定义 store feature 抽取与组合、以及 Signal Store 相关测试编写。

限制

不处理经典 @ngrx/store 的 actions/reducers/effects,不处理纯 RxJS 管道问题,也不涉及未使用 Signal Store 的 Redux DevTools 配置。资料未提供该技能的具体安装命令、运行平台、收费方式或效果数据,相关内容暂未提供。