关于javascript:使用-Ngrx-ActionSubject-监听-Dispatched-NgRx-Actions

41次阅读

共计 1550 个字符，预计需要花费 4 分钟才能阅读完成。

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));
      }
    }

上述代码的几处关键点：