SuperAPI AI 工具集

ngrx-store

编程与开发

查看项目

更新于 10-19 16:18

技能介绍

用途

该指南用于在 Angular 项目中创建 NgRx Signals Store,帮助开发者按照统一的项目模式组织状态管理代码。当用户提出创建 store、添加状态管理、新建 store 或 signal store 等请求时,可依据此指南生成符合规范的文件结构与代码。

文件组织

指南规定 Store 相关文件按领域组织在 src/app/<domain>/ 下:Store 定义位于 data/state/<domain>-store.ts(使用连字符分隔),状态接口位于 data/models/<domain>.model.ts,API 服务位于 data/infrastructure/<domain>.ts。

主要能力

指南提供了多种 Store 构建模板:

  • 基础 Store 模板:使用 signalStore、withState、withComputed、withMethods 和 patchState 组合状态、派生值与同步/异步方法;异步 API 调用通过 rxMethod 与 tapResponse 处理加载与错误状态。
  • Entity Store 模板:在基础模板之上引入 withEntities、entityConfig 及 addEntity、updateEntity、removeEntity、setAllEntities 等实体操作,适合管理集合型数据,并可结合计算属性实现筛选视图。
  • 带钩子的 Store:通过 withHooks 在 onInit 中触发数据加载、在 onDestroy 中执行清理。
  • 自定义属性 Store:通过 withProps 暴露 Observable 形式的 loading$(使用 toObservable),或注入依赖供方法访问。

使用方式

指南展示了组件集成方式:组件通过 inject(TaskStore) 获取 Store 实例,在模板中直接调用 Store 的 signal 计算属性与方法;同时提供了基于 Vitest 和 TestBed 的 Store 测试示例,包括 mock 服务注入、状态初始化断言和异步加载断言。指南末尾附有检查清单,涵盖文件位置、状态接口类型、初始状态、rxMethod 与 tapResponse 的使用、实体操作、计算属性以及 providedIn: 'root' 或作用域配置等要点。

适用场景

适用于采用 Angular 与 NgRx Signals 的项目,在需要新增或规范化状态管理 Store 时使用,包括普通状态、实体集合管理、异步数据加载和组件集成的开发场景。

限制

资料仅覆盖 Store 创建模式与示例代码,未提供安装命令、依赖版本要求、与其他状态管理方案的对比、性能说明或官方文档链接;具体项目中的 API 服务实现、模型字段和领域划分需开发者自行补充。