NgRx 是一个用于 Angular 利用开发的响应式 State 管理工具库。
受到 Redux 的影响，Ngrx 底层应用 Rxjs 来容许用户治理整个利用的全局状态。
不是每个应用程序都须要状态治理解决方案，然而集中应用程序的状态和逻辑能够实现吊销 / 重做、状态持久性等弱小性能。
应用 NgRx 须要了解一些要害概念，Actions 就是其中之一。
在 NgRx 上下文中，动作形容的是能够从任何中央 (例如组件和服务) 分派的惟一事件实例。
上面的代码展现了一个简略操作的样子。显示登录屏幕的组件能够调度 (dispatch) 这个动作，通知正在监听的人 (例如 effect) 应该发送一个到后端登录 endpoint 的 HTTP 申请。登录数据通过调度 action 提供:
通过 @ngrx/store 的 createAction 结构器创立了一个 Action 实例，蕴含了用户输出的用户名和明码。
对于上图所示的源代码，能够编写单元测试代码，查看提交了 login form 之后，是否调度了对应的 action.
如果应用程序变大，应用程序状态也会变大。一开始你可能只有几个动作，一个减速器和两个成果，但几年后，你可能忽然有动作、减速器和成果扩散在不同团队的不同应用程序和库中。
本文咱们一起来探讨一种繁难的通过 ActionSubject 实现的探测某 Action 是否曾经 Dispatch 的形式。
NgRx 提供了一个整洁的实用程序 ActionsSubject，咱们能够通过依赖注入来拜访它，如下图所示：
这个名字曾经表明咱们在应用 Subject 的概念了。Subject 是 Observable 的一种非凡类型。因而，咱们能够订阅它以取得它的最新值。在本例中，咱们通过该流检索的任何值都是一个已分派的 NgRx Action。
通过订阅 ActionsSubject，咱们将收到应用程序中任何正在分派的操作的告诉。咱们能够记录传入的操作，以验证是否应用正确的数据和正确的程序分派了适当的操作。这有助于了解在整个会话中如何以及何时分派操作。
代码如下图所示：
import {Component, OnInit} from '@angular/core';
import {ActionsSubject} from '@ngrx/store';
import {skip} from 'rxjs/operators';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {constructor(private actionListener$: ActionsSubject) {}
ngOnInit() {
this.actionListener$.pipe(skip(1) // optional: skips initial logging done by ngrx
).subscribe((action) => console.info('ngrx action', action));
}
}
上述代码的几处关键点：
- 增加了
skip(1)来防止记录 NgRx 本人调度的第一个操作。 - 开发人员应该思考是否真的想要记录任何分派操作。毕竟，您可能不心愿在生产环境中记录用户凭据。一种办法是在开发模式下只侦听，从而在生产环境中禁用任何操作日志记录。
- 应该勾销订阅以防止内存透露。例如，能够在 Angular 提供的 ngOnDestroy 生命周期钩子中保留订阅和勾销订阅的援用。
在较大的应用程序中，这种办法能够通过记录任何已分派的操作来真正帮忙咱们了解何时以及如何分派操作。侥幸的是，NgRx 让咱们很容易做到这一点。不须要另一个包或浏览器扩大。