SuperAPI AI 工具集

web-state-ngrx-signalstore

前端与建站

查看项目

更新于 10-15 19:52

技能介绍

用途:本技能整理 NgRx SignalStore 在 Angular 中的状态管理模式,用于以 Angular Signals 管理客户端状态、组合 store 特性、处理实体集合与副作用。

主要能力:SignalStore 是由特性从左到右组装而成的 Angular 服务,依次为 withState、withComputed、withMethods、withHooks,每个特性只能看到其之前声明的成员。状态更新统一通过 patchState 完成;自 v18 起状态受保护,v19 起开发模式会递归冻结状态。集合使用 withEntities 维护 entityMap 与 ids,提供 O(1) 查找及 CRUD 更新器(setAllEntities、addEntity、updateEntity、removeEntity 等)。可变对象(如 FormGroup、类实例)应放入 withProps 而非 state。可取消的异步通过 rxMethod 驱动,仅响应信号的副作用可用 signalMethod(v19+)。还包含 signalStoreFeature 自定义特性、withHooks 生命周期、调用状态、withFeature(v20+)与 withLinkedState(v20+)。

使用方式:全局 store 用 signalStore({ providedIn: "root" });组件级 store 放入组件 providers,随组件销毁。示例:signalStore(withState({ count: 0 }), withComputed(...), withMethods(...))。更新用 patchState(store, { isLoading: true }) 或 patchState(store, (state) => ({ count: state.count + 1 }))。

适用场景:特性组合与顺序、状态更新与计算值、实体集合、副作用、可复用特性、测试及从 actions/reducers 迁移。

限制:网络请求本身属于服务,本技能只覆盖持有、派生与取消;单组件读取的值用普通 signal 更简单;过滤、搜索、分页应放在路由 query。资料未提供具体安装命令与版本要求。