Logo

菜单

发布于 2026-01-06 2 阅读
0

NgRx v15 正式发布：独立 API、类型安全投影仪、组件和组件存储更新等等！

NgRx v15 正式发布：独立 API、类型安全投影仪、组件和组件存储更新等等！

我们很高兴地宣布 NgRx 框架的最新主要版本发布，其中包含一些令人兴奋的新功能、错误修复和其他更新。

适用于 NgRx 库的独立 API 🧙

Angular v14 引入了组件、管道和指令的独立功能，使用户能够构建 Angular 应用程序，而 NgModules 则成为可选组件。在 Angular v15 中，这些独立 API 不再处于开发者预览阶段。

为了更好地支持独立功能，所有在 Angular 中注册功能的 NgRx 库都提供了等效的provide*API，以兼容构建包含独立功能的 Angular 应用程序。让我们来看看这些新的 API。

根级提供程序：

boostrapApplication(AppComponent, {
  providers: [
    provideStore(),
    provideEffects(AppEffects),
    provideStoreDevtools(),
    provideRouterStore(),
    provideEntityData(config, withEffects())
  ]  
});
Enter fullscreen mode Exit fullscreen mode

在延迟加载的功能中，例如路由配置：

[
  {
    path: 'products',
    component: ProductsPageComponent,
    providers: [
      provideState(productsFeature),
      provideEffects(ProductsEffects)
    ]
  }
]
Enter fullscreen mode Exit fullscreen mode

感谢Jay Bell、Santosh Yadav和其他人士为这些新 API 的开发所做的贡献。

请查看Tim 的最新博客文章，了解 NgRx API 如何随着时间的推移而发展，以及如何利用它们。

宣布推出企业支持服务👨‍🏫

NgRx 库集合将始终保持开源、MIT 许可和免费使用。与此同时，我们也了解到一些公司反映，设计高质量的架构可能充满挑战，需要额外的帮助和指导。

NgRx 团队的成员现在为对 NgRx 研讨会、最佳实践培训、架构审查等感兴趣的人提供付费支持。

请访问我们的企业支持页面了解更多信息。

NgRx 组件标记为稳定 ✍

NgRx Component 组件包为 Angular 模板带来了更强的响应式特性，并支持完全无区域划分的 Angular 应用。NgRx Component 提供了两个主要特性：ngrxPush管道（pipe）和ngrxLet指令（directive），使在 Angular 组件模板中使用可观察对象（observables）更加便捷。

在版本 14 中，团队成员Marko Stanimirović从头开始​​完全重写了组件包，从而提供了一种更一致的方式来处理可观察数据和静态数据，提高了 Angular 中无区域应用程序的性能等等。在版本 15 中，该组件包不再标记为实验性版本，而是标记为稳定版本，供开发人员使用并获得全面支持。

新增功能还包括@ngrx/component允许在模板中使用指令传递一个可观察对象字典ngrxLet。系统会根据提供的可观察对象创建一个视图模型对象。

<ng-container *ngrxLet="{ users: users$, query: query$ } as vm">
  <app-search-bar [query]="vm.query"></app-search-bar>
  <app-user-list [users]="vm.users"></app-user-list>
</ng-container>
Enter fullscreen mode Exit fullscreen mode

阅读这篇文章，了解更多关于NgRx组件的信息。

选择器投影仪的严格类型安全🔒

在使用 NgRx Store 构建选择器时，投影函数用于向选择器提供输入并断言其结果。此前，投影函数允许传递的参数类型较为宽松，且其类型并非由选择器本身推断得出。在版本 15 中，投影函数现在已实现开箱即用的严格类型检查，从而提高了传递给选择器的输入的类型安全性。

投影仪默认是严格的，但可以通过任意类型断言来指定不太具体的类型。

const mySelector = createSelector(
  () => 'one',
  () => 2,
  (one, two) => 3
);

// Type is projector(s1: string, s2: number): number
mySelector.projector(); // <-- Results in type error.
Enter fullscreen mode Exit fullscreen mode

要选择不启用新行为，请直接调用投影函数。

const mySelector = createSelector(
  () => 'one',
  () => 2,
  (one, two) => 3
)

(mySelector.projector as any)();
Enter fullscreen mode Exit fullscreen mode

感谢大卫·肖特曼对本文的贡献。

使用 ComponentStore 简化视图模型 ✨

创建视图模型是将多个数据流整合到一个简洁的 API 中，并提供给组件的推荐方法。ComponentStore 允许您轻松地从多个来源组合这些数据流。为了进一步改进这一点，我们为该ComponentStore.select方法添加了一个新的签名，允许您提供一个 Observable 字典，并返回一个包含这些值的 Observable 字典。

在采用新方法之前，ComponentStore 投影仪会重复其输入。

readonly vm$: Observable<SomeViewModel> = this.select(
  this.selectedTab$,
  this.routerStateService.baseListRoute$,
  this.secondaryNavigationItems$,
  this.isFlaggedPage$,
  this.pageTitle$,
  this.hasError$,
  this.errorMessage$,
  (
    selectedTab,
    baseRoute,
    secondaryNavTabs,
    isFlaggedPage,
    pageTitle,
    hasError,
    errorMessage,
  ) => ({
    selectedTab,
    baseRoute,
    secondaryNavTabs,
    isFlaggedPage,
    pageTitle,
    hasError,
    errorMessage,
  }),
  { debounce: true },
);
Enter fullscreen mode Exit fullscreen mode
  • 新的选择签名使内容更加简洁。
readonly vm$: Observable<SomeViewModel> = this.select({
  selectedTab: this.selectedTab$,
  baseRoute: this.routerStateService.baseListRoute$,
  secondaryNavTabs: this.secondaryNavigationItems$,
  isFlaggedPge: this.isFlaggedPage$,
  pageTitle: this.pageTitle$,
  hasError: this.hasError$,
  errorMessage: this.errorMessage$,
}, { debounce: true });
Enter fullscreen mode Exit fullscreen mode

我们还计划在 NgRx Store 中添加对向选择器提供字典的支持。

周边商店和Discord服务器！👕

您可以在我们的商店购买官方 NgRx 周边产品！印有 NgRx 标志的 T 恤有多种尺码、材质和颜色可供选择。未来我们还会陆续上架贴纸、磁贴等更多新品。立即访问我们的商店，选购您的 NgRx 周边产品吧！

加入我们的Discord 服务器，即可与 NgRx 社区的新老成员进行交流。

弃用和重大变更💥

此版本包含错误修复、弃用项和重大变更。对于大多数弃用项或重大变更，我们提供了一个迁移脚本，当您将应用程序升级到最新版本时，该脚本会自动运行。

请参阅版本 15 迁移指南，了解有关迁移到最新版本的完整信息。完整的更新日志可在我们的 GitHub 代码库中找到。

升级到 NgRx 15 🗓️

要开始使用 NgRx 15，请确保已安装以下最低版本：

  • Angular 版本 15.x
  • Angular CLI 版本 15.x
  • TypeScript 版本 4.8.x
  • RxJS 版本 ^6.5.x 或 RxJS 版本 ^7.5.x

NgRx 支持使用 Angular CLI 的 `ng update` 命令来更新 NgRx 包。要将包更新到最新版本，请运行以下命令：

ng update @ngrx/store
Enter fullscreen mode Exit fullscreen mode

为 NgRx 做贡献 🥰

我们一直在努力改进文档，并使其保持最新状态，以方便 NgRx 框架的用户使用。为了帮助我们，您可以开始为 NgRx 做贡献。如果您不确定从哪里开始，请查看我们的贡献指南，并观看 Jan-Niklas Wortmann 和 Brandon Roberts 制作的入门视频。

感谢所有贡献者和赞助商。

NgRx 一直是一个社区驱动的项目。设计、开发、文档编写和测试都离不开社区的帮助。我们最近在 NgRx 团队页面新增了一个社区板块，列出了所有为该平台做出贡献的人员。

如果您有兴趣贡献代码，请访问我们的 GitHub 页面，查看我们待解决的问题，其中一些问题专门针对新贡献者。我们还在 GitHub 上设有活跃的讨论区，用于讨论新功能和改进建议。

赞助 NgRx 💲

我们正在寻找下一位黄金赞助商，因此，如果贵公司希望赞助 NgRx 的持续开发，请访问我们的GitHub 赞助商页面了解不同的赞助选项，或直接联系我们讨论其他赞助机会。

我们要衷心感谢我们的银牌赞助商 Narhwal Technologies！Nrwl 长期以来一直推广 NgRx 作为构建大型 Angular 应用程序的工具，并致力于支持他们所依赖的 NgRx 开源项目。

请在Twitter上关注我们，获取有关NgRx平台的最新动态。

文章来源：https://dev.to/ngrx/announcing-ngrx-v15-standalone-apis-type-safe-projectors-component-and-componentstore-updates-and-more-l7
使用 Jest 开始对你的 Jav...
在 React Hooks 中使用...