NgRx v14 正式发布：新增动作组、ComponentStore 生命周期钩子、ESLint 包、全新 NgRx 组件等功能！
我们很高兴地宣布 NgRx 框架的最新主要版本发布，其中包含一些令人兴奋的新功能、错误修复和其他更新。
新增创建操作组功能🧙
如果您熟悉 NgRx Store，就会知道操作 (action) 是使用它的应用程序的重要组成部分。有人甚至说操作是 NgRx 的灵魂 😉，不过这又是另一个故事了。在 NgRx 13.2 中，我们引入了一项新功能，该功能最初由Mike RyancreateActionGroup构思，并由Marko Stanimirović实现，旨在让创建操作变得更加轻松。
下面的视频简要概述了如何使用 Good Action Hygiene™ 单独编写操作，并介绍了createActionGroup可最大限度减少要编写的代码量和导出操作组的新功能。
该createActionGroup函数利用了 TypeScript 中引入的更高级的功能，因此，如果您对高级 TypeScript 感兴趣，一定要查看源代码，以发现一些新技巧。
组件商店生命周期钩子🎣
NgRx ComponentStore库因其能够更一致、更可预测地在 Angular 应用中响应式管理状态的特性而日益流行。使用 ComponentStore 可以将组件中的业务逻辑抽象出来，从而在更新状态、执行副作用以及提供可观察的状态变化流时，实现自动化。
在某些情况下，您需要在创建 ComponentStore 或首次初始化 ComponentStore 状态时执行某些任务。以前，要实现这一点，您需要在 ComponentStore 上公开一个方法，并从组件的生命周期方法中调用它。为了简化此过程，我们为 ComponentStore 引入了两个接口和生命周期钩子OnStoreInit。OnStateInit
OnStoreInit
该OnStoreInit接口用于实现ngrxOnStoreInitComponentStore 类中的方法。此生命周期方法在 ComponentStore 类实例化后立即调用。
export interface BooksState {
collection: Book[];
}
export const initialState: BooksState = {
collection: []
};
@Injectable()
export class BooksStore extends ComponentStore<BooksState> implements OnStoreInit {
constructor() {
super(initialState);
}
ngrxOnStoreInit() {
// called after store has been instantiated
}
}
并使用该provideComponentStore()函数将 ComponentStore 注册到providers数组中。
@Component({
// ... other metadata
providers: [
provideComponentStore(BooksStore)
]
})
export class BooksPageComponent {
constructor(private booksStore: BooksStore) {}
}
OnStateInit
该OnStateInit接口用于实现ComponentStore 类中的方法。此生命周期方法仅在 ComponentStore 状态初始设置后ngrxOnStateInit调用一次。ComponentStore 支持状态的即时初始化和延迟初始化，并且在两种情况下都会相应地调用生命周期钩子。
渴望状态初始化
export interface BooksState {
collection: Book[];
}
export const initialState: BooksState = {
collection: []
};
@Injectable()
export class BooksStore extends ComponentStore<BooksState> implements OnStateInit {
constructor() {
// eager state initialization
super(initialState);
}
ngrxOnStateInit() {
// called once after state has been first initialized
}
}
@Component({
// ... other metadata
providers: [
provideComponentStore(BooksStore)
]
})
export class BooksPageComponent {
constructor(private booksStore: BooksStore) {}
}
### Lazy State Init
export interface BooksState {
collection: Book[];
}
@Injectable()
export class BooksStore extends ComponentStore<BooksState> implements OnStateInit {
constructor() {
super();
}
ngrxOnStateInit() {
// called once after state has been first initialized
}
}
export const initialState: BooksState = {
collection: []
};
@Component({
// ... other metadata
providers: [
provideComponentStore(BooksStore)
]
})
export class BooksPageComponent implements OnInit {
constructor(private booksStore: BooksStore) {}
ngOnInit() {
// lazy state initialization
this.booksStore.setState(initialState);
}
}
如果在 ComponentStore 中实现生命周期钩子，并且在开发模式下providers未使用进行注册provideComponentStore()，则会在浏览器控制台中记录一条警告。
原生 ESLint 包📦
NgRx 团队一直在寻找更好的方法来鼓励开发者在使用 NgRx 库时遵循最佳实践。团队成员Tim Deschryver创建了这个ngrx-eslint-plugin软件包，为使用 NgRx 构建的应用程序提供 ESLint 最佳实践规则。在之前的 NgRx 版本中，我们引入了将该ngrx-eslint-plugin软件包添加到您的项目中package.json，并将 lint 规则添加到 ESLint 配置中的功能。
ng add @ngrx/store
为了提供更完善的集成体验，我们已将该ngrx-eslint-plugin软件包移至主ngrx/platform代码库，并新增了一个@ngrx/eslint-pluginESLint 规则软件包。该软件包已稳定运行一段时间，现在对于使用 NgRx 库的开发者来说将更加容易找到，因为它已有完善的文档页面和持续的支持。
NgRx 组件包已全面更新 ✍
NgRx Component 包一直以来都怀揣着一个雄心勃勃的目标：为 Angular 模板带来更强的响应式，并支持完全无区域划分的 Angular 应用。该包最初由Michael Hladky编写，最终发展成为一个@rx-angular/template成熟的库，@ngrx/component即使它仍处于实验阶段，也广受好评。
NgRx Component 提供了两个主要特性：ngrxPush管道和ngrxLet指令，使在 Angular 组件模板中使用可观察对象更加便捷。在 14 版本中，团队成员Marko Stanimirović从头开始完全重写了组件包，旨在提供更一致的方式来处理可观察对象和静态数据，提升 Angular 无区域应用程序的性能等等。
NgRx 组件还引入了两个新模块：LetModule和PushModule。
要使用新模块，请导入并将其添加LetModule到PushModule独立imports组件或 NgModule 的数组中。
import { Component } from '@angular/core';
import { LetModule, PushModule } from '@ngrx/component';
@Component({
// ... other metadata
standalone: true,
imports: [
// ... other imports
LetModule,
PushModule
],
})
export class MyStandaloneComponent {}
这些新的 NgModules 允许对ngrxPush管道和ngrxLet指令进行更精细的控制，并为引入这些管道和指令的独立版本铺平了道路，以便更好地利用 Angular v14 中引入的全新独立功能。阅读这篇文章，了解更多关于 v14 中 NgRx 组件更新的信息。
Angular 中 NgRx 的未来🌞
Angular v14 为组件、管道和指令引入了一些令人兴奋的新特性，包括新的“环境注入器”以及inject()无需直接使用构造函数即可使用依赖注入的更新函数。组件、管道和指令的独立特性使得您可以构建 Angular 应用程序，而 NgModules 则基本成为可选组件。
由于大多数 NgRx 库主要由提供程序组成，并不提供 UI 组件，因此我们可以利用这些新的独立 API，在不使用 NgModules 的情况下，在 Angular 应用中注册 NgRx 提供程序。请查看Marko 的最新博文，了解如何在 Angular 中使用 NgRx 的独立功能。该inject()功能已存在一段时间，但现在提供了更强大的功能，可以组合无需构造函数即可注入依赖项的函数，并简化扩展类的组合。
虽然 Angular 的独立功能目前仍处于开发者预览阶段，但我们在最新的 RFC中提出了一些针对 NgRx 的新 API 。如果您想为未来使用 NgRx 构建的 Angular 应用提供一些建议，欢迎查看 RFC 并分享您的想法。
周边商店和Discord服务器！👕
您可以在我们的商店购买官方 NgRx 周边产品！印有 NgRx 标志的 T 恤有多种尺码、材质和颜色可供选择。未来我们还会陆续上架贴纸、磁贴等更多新品。立即访问我们的商店，选购您的 NgRx 周边产品吧！
加入我们的Discord 服务器，即可与 NgRx 社区的新老成员进行交流。
弃用和重大变更💥
此版本包含错误修复、弃用项和重大变更。对于大多数弃用项或重大变更，我们提供了一个迁移脚本，当您将应用程序升级到最新版本时，该脚本会自动运行。
请参阅版本 14 迁移指南，了解有关迁移到最新版本的完整信息。完整的更新日志可在我们的 GitHub 代码库中找到。
升级到 NgRx 14 🗓️
要开始使用 NgRx 14，请确保已安装以下最低版本：
- Angular 版本 14.x
- Angular CLI 版本 14.x
- TypeScript 版本 4.7.x
- RxJS 版本 ^6.4.x 或 RxJS 版本 ^7.5.x
NgRx 支持使用 Angular CLI 的 `ng update` 命令来更新 NgRx 包。要将包更新到最新版本，请运行以下命令：
ng update @ngrx/store
为 NgRx 做贡献 🥰
我们一直在努力改进文档，并使其保持最新状态，以方便 NgRx 框架的用户使用。为了帮助我们，您可以开始为 NgRx 做贡献。如果您不确定从哪里开始，请查看我们的贡献指南，并观看 Jan-Niklas Wortmann 和 Brandon Roberts 制作的入门视频。
感谢所有贡献者和赞助商。
NgRx 一直是一个社区驱动的项目。设计、开发、文档编写和测试都离不开社区的帮助。我们最近在 NgRx 团队页面新增了一个社区板块，列出了所有为该平台做出贡献的人员。
如果您有兴趣贡献代码，请访问我们的 GitHub 页面，查看我们待解决的问题，其中一些问题专门针对新贡献者。我们还在 GitHub 上设有活跃的讨论区，用于讨论新功能和改进建议。
赞助 NgRx 💲
我们正在寻找下一位黄金赞助商，因此，如果贵公司希望赞助 NgRx 的持续开发，请访问我们的OpenCollective页面了解不同的赞助选项，或直接联系我们讨论其他赞助机会。
我们要衷心感谢我们的银牌赞助商 Narhwal Technologies！Nrwl 长期以来一直推广 NgRx 作为构建大型 Angular 应用程序的工具，并致力于支持他们所依赖的 NgRx 开源项目。
请在Twitter上关注我们，获取有关NgRx平台的最新动态。
文章来源：https://dev.to/ngrx/announcing-ngrx-v14-action-groups-componentstore-lifecycle-hooks-eslint-package-revamped-ngrx-component-and-more-18ck