Angular小博客

分享让你更聪明

[译2017]宣布 NgRx 4 的发布

浏览:87次 日期:2024年09月13日 9:23:49 作者:admin

Rob Wormald:这是 NgRx 核心团队 Victor Savkin 的客座文章。 NgRx 是一套库,使 Angular 开发人员能够更有效地构建大型项目。

团队希望您会喜欢此版本中的很多内容。一些亮点:

当然,这个版本还有很多很棒的东西(改进的开发人体工程学和针对初学者的错误消息)。因此,请查看ngrx 平台存储库以了解更多信息。

支持延迟加载

尽管始终可以通过 NgRx 使用延迟加载(请参阅此处),但这并不容易:您必须手动管理加载和卸载减速器。在此版本中,我们添加了对延迟加载的官方支持。

@NgModule({
  imports: [
    StoreModule.forRoot(appReducers),
    EffectsModule.forRoot([SourceA, SourceB]),
    RouterModule.forRoot([
      { path: ‘lazy’, loadModule: ‘./lazy.module#LazyModule’ }
    ])
  ]
})
export class AppModule { }
@NgModule({
  imports: [
    StoreModule.forFeature(‘lazy’, lazyReducers),
    EffectsModule.forFeature([SourceC]),
    RouterModule.forChild(childRoutes)
  ]
})
export class LazyModule { }

与 Angular 路由器类似,NgRx 使用 forRoot 作为主 NgModule,使用 forFeature 作为延迟加载模块。

改进的测试

NgRx 明确区分了 UI、状态管理和副作用。仅此一点就使测试变得更加简单和愉快,但我们始终知道我们可以做得更好。

由于减速器是同步纯函数,因此测试它们总是很容易。但是测试严重依赖 RxJS 的效果类是很棘手的。

RxJS 社区提出了一个很好的解决方案来简化 RxJS 可观察量的测试 – 弹珠测试,这使得测试直观且易于阅读。以前使用弹珠来测试效果类并不容易,但随着 NgRx 4 的出现,情况发生了变化。

describe(‘My Effects’, () => {
  let effects: MyEffects;
  let actions: Observable<any>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [
        MyEffects,
        provideMockActions(() => actions),
        // other providers
      ],
    });

    effects = TestBed.get(MyEffects);
  });

  it(‘should work’, () => {
    actions = hot(‘—a-’, { a: SomeAction,  … });
    const expected = cold(‘—b’, { b: AnotherAction });
    expect(effects.someSource$).toBeObservable(expected);
  });
});

重新设计的路由器集成

NgRx 帮助解决软件开发中最困难的问题之一——状态管理。但这并不是国家管理故事的唯一部分。另一种是路由器。这就是为什么确保 NgRx 和路由器协同工作是我们的首要任务。

我们在 NgRx 2 路由器集成方面遇到的主要问题是,商店和路由器在此之后进行了同步。这意味着解析器和守卫无法访问新状态,这使得它们的用处降低。这也意味着商店无法取消导航。

为了解决这个问题,我们必须让 Angular 路由器更具可插拔性。完成后,我们重新设计了集成,使商店更新成为导航过程的一部分。

NgRx 3 发生了什么?

NgRx 长期以来一直是 Angular 的半官方状态管理库。它是 Angular 生态系统的重要组成部分。这就是为什么我们要确保版本号与核心框架保持一致。阅读Igor Minar 的这篇文章或 Angular 4 的发布来了解更多信息。

在 Open Collective 上支持 NgRx

我们经常被问到人们如何支持 NgRx 开发。您可以通过我们的Open Collective 页面支持 NgRx。这将涵盖托管、持续集成和其他杂项开发费用。

了解更多

我们投入了大量工作来确保从 NgRx 2 迁移到 NgRx 4 是简单的,并且在很大程度上是机械的。阅读“从 V2 到 V4 的迁移指南”了解更多信息。

您还可以在这些资源中详细了解为什么使用 NgRx 4 以及如何有效地使用它。

*使用 NgRx 4 管理 Angular 应用程序中的状态

NgRx 4:高级模式和技术

*全面介绍@ngrx/store

Victor Savkin 是nrwl.io的联合创始人,为企业团队提供 Angular 咨询。他之前曾在 Google 的 Angular 核心团队工作,并对 Angular 做出了重大贡献,包括依赖注入、变更检测、表单和路由器模块。

文章原文地址:https://blog.angular.dev/announcing-ngrx-4-87df0eaa2806