NgRx 22 发布：引入 Resource Extensions 和动态 DeepSignal，增强 Angular 状态管理能力

面向 Angular 的响应式状态管理框架 NgRx 发布了 22 版本，新增用于定制 Angular Resource API 的工具、支持联合类型的动态 DeepSignal、新的 SignalStore 类型辅助工具，并兼容 ESLint v10。

此次更新最重要的新功能是 Resource Extensions。该功能通过全新的实验性入口 @ngrx/signals/resource 提供。Angular 的 resource 和 httpResource API 在重新加载时会将 value() 重置为 undefined，而在资源进入错误状态后，读取该值则会抛出异常。Resource Extensions 在现有 Resource 外部进行封装，只调整这些行为，同时保留原有的资源类型。

新版本内置了四种扩展，并提供 provideResourceExtensions 函数，可在应用、路由或组件级别注册默认扩展。在最初的 RFC 中，Marko Stanimirović 解释说，调整错误处理行为也是进一步将 Resource 与 SignalStore 集成的前提条件，因为“资源一旦进入错误状态，后续任何一次 patchState 调用都会抛出异常，因为它在内部会读取 value()”。

这一提案获得了社区的积极反馈。Manfred Steyer 回复“非常棒”，并建议增加一个用于激活资源的 Signal。另一位评论者则希望该功能能够与 SolidJS 的 createResource 保持一致，例如允许在 loader 中访问当前值。

DEV 上的一篇社区综述指出，利用 Angular 的 snapshot() 和额外的状态处理逻辑，也可以实现类似行为。但使用 Resource Extensions 时，“可以直接操作 Resource 本身”，既能让值保持可写状态，也能保留 httpResource 更具体的类型信息。

TanStack Query for Angular 也提供了类似的能力：当查询键发生变化时，可以通过 placeholderData: keepPreviousData 保留之前的数据。此外，社区维护的 NgRx Toolkit 中的 withResource 也早已支持读取 undefined 时不抛出异常、保留先前的值，以及面向 SignalStore 的错误处理策略；其中相关错误处理能力自 v20.6.0 起便已提供。

NgRx 22 还让 DeepSignal 能够根据类型动态变化。此前，如果某个状态切片使用联合类型来描述不同状态（例如用来表示“尚未加载”的状态），它会被折叠成一个扁平的 Signal。现在，对象字面量中的每个成员都拥有独立的 DeepSignal，并且可以在使用 in 运算符缩小类型范围后访问相应的信号。

新版本还增加了 SignalStoreFeatureType 工具类型，用于提取 Feature Factory 的状态及其成员。自定义 Feature 因而可以直接复用这些类型作为输入，而不必手动重新声明。其他更新包括：@ngrx/store-devtools 新增 actionCreators 选项，允许从 Redux DevTools 分发 Action；@ngrx/eslint-plugin 现在兼容 ESLint v10，同时不再支持 ESLint v8 和旧版 .eslintrc 配置格式；NgRx 文档网站也新增了浅色主题。

升级到新版本需要使用 Angular 22、TypeScript 6.0，以及 RxJS ^6.5 或 ^7.5。开发者可以运行 ng update @ngrx/store@22 进行升级；如果项目只使用 SignalStore，则可以运行 ng update @ngrx/signals@22。大多数破坏性变更都提供了自动迁移工具，具体细节见 v22 迁移指南和变更日志。团队还需要注意，Angular 22 调整了 Resource 的时序行为。一位开发者曾报告相关测试失败，这一问题随后被纳入 Angular 发布说明，并作为一项破坏性变更列出。

在 Hacker News 上关于 Angular v22 的讨论帖中，一位用户写道：

NgRx Signals 是新的实现方式，而且用起来很棒。过去需要五个文件才能把状态管理接起来，现在通常只需要一个文件，就能把全部或大部分相关功能放在一起。

现代 Angular 用起来比早期的 v2 版本好太多了（甚至比我刚开始使用时的 v4 版本也好得多）。如今，很多过去不得不编写的样板代码已经没有必要了。而且，即使是 RxJS 和 NgRx，也越来越不再是必需品了，这很好。

NgRx 是一个由社区驱动的开源框架，用于构建响应式 Angular 应用。它通过 Store 和 Effects 提供全局状态管理，同时提供基于 Signal 的 SignalStore。该项目由 Nx 和 CodeRabbit 赞助，源代码托管在 GitHub 上。

查看英文原文：NgRx 22: Resource Extensions and Dynamic Deep Signals for Angular