当前位置: 首页 > Web前端 > HTML

使用NgrxActionSubject监听DispatchedNgRxActions

时间:2023-03-27 23:00:34 HTML

NgRx是一个用于Angular应用开发的响应式状态管理工具库。受Redux的影响,Ngrx在底层使用Rxjs来允许用户管理整个应用程序的全局状态。并非每个应用程序都需要状态管理解决方案,但集中应用程序的状态和逻辑可实现撤消/重做、状态持久化等强大功能。使用NgRx需要了解一些关键概念,Actions就是其中之一。在NgRx的上下文中,操作描述了可以从组件和服务等任何地方分派的唯一事件实例。下面的代码显示了一个简单的操作可能是什么样子。显示登录屏幕的组件可以调度此操作,告诉正在监听的任何人(例如effect)应将HTTP请求发送到后端登录端点。登录数据由调度action提供:通过@ngrx/store的createAction构造函数创建一个Action实例,其中包含用户输入的用户名和密码。对于上图所示的源代码,您可以编写单元测试代码来检查提交登录表单后是否派发了相应的动作。如果应用变大,应用状态也会变大。您可能一开始只有几个动作、一个缩减器和两个效果,但几年后,您可能突然将动作、缩减器和效果分散在不同团队的不同应用程序和库中。在本文中,让我们讨论一种简单的方法来检测是否已通过ActionSubject调度了一个Action。NgRx提供了一个简洁的实用程序ActionsSubject,我们可以通过依赖注入访问它,如下图所示:名称已经表明我们正在使用Subject的概念。Subject是一种特殊类型的Observable。因此,我们可以订阅它来获取它的最新值。在这种情况下,我们通过流检索的任何值都是分派的NgRx操作。通过订阅ActionsSubject,我们将收到应用程序中正在发送的任何操作的通知。我们可以记录传入的操作,以验证是否使用正确的数据并以正确的顺序分派了适当的操作。这有助于了解在整个会话期间如何以及何时分派操作。代码如下图所示:import{Component,OnInit}from'@angular/core';从'@ngrx/store'导入{ActionsSubject};从'rxjs/operators'导入{skip};@Component({selector:'app-root',templateUrl:'./app.component.html',styleUrls:['./app.component.css']})exportclassAppComponentimplementsOnInit{constructor(privateactionListener$:ActionsSubject){}ngOnInit(){this.actionListener$.pipe(skip(1)//可选:跳过ngrx完成的初始日志记录).subscribe((action)=>console.info('ngrxaction',action));}}上面的代码几个关键点:添加了skip(1)以避免记录NgRx本身安排的第一个操作。开发人员应该考虑他们是否真的想要记录任何调度操作。毕竟,您可能不想在生产环境中记录用户凭据。一种方法是仅在开发模式下监听,从而禁用生产中的任何操作日志记录。应该取消订阅以避免内存泄漏。例如,对subscribe和unsubscribe的引用可以保存在Angular提供的ngOnDestroy生命周期钩子中。在较大的应用程序中,这种方法可以真正帮助我们通过记录任何已调度的操作来了解何时以及如何调度操作。幸运的是,NgRx让我们很容易做到这一点。无需其他包或浏览器扩展。