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 长期以来一直是 Angular 的半官方状态管理库。它是 Angular 生态系统的重要组成部分。这就是为什么我们要确保版本号与核心框架保持一致。阅读Igor Minar 的这篇文章或 Angular 4 的发布来了解更多信息。
我们经常被问到人们如何支持 NgRx 开发。您可以通过我们的Open Collective 页面支持 NgRx。这将涵盖托管、持续集成和其他杂项开发费用。
我们投入了大量工作来确保从 NgRx 2 迁移到 NgRx 4 是简单的,并且在很大程度上是机械的。阅读“从 V2 到 V4 的迁移指南”了解更多信息。
您还可以在这些资源中详细了解为什么使用 NgRx 4 以及如何有效地使用它。
*使用 NgRx 4 管理 Angular 应用程序中的状态
Victor Savkin 是nrwl.io的联合创始人,为企业团队提供 Angular 咨询。他之前曾在 Google 的 Angular 核心团队工作,并对 Angular 做出了重大贡献,包括依赖注入、变更检测、表单和路由器模块。
文章原文地址:https://blog.angular.dev/announcing-ngrx-4-87df0eaa2806