首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

NgRx取消订阅存储效果

基础概念

NgRx 是一个基于 RxJS 的状态管理库,用于 Angular 应用程序。它通过使用 Redux 模式来管理应用程序的状态。NgRx 中的 Effects 用于处理副作用操作,例如 API 调用、异步任务等。

取消订阅存储效果的原因

在 NgRx 中,Effects 通常返回一个 Observable,这意味着它们会持续运行直到被取消订阅。如果不取消订阅,可能会导致内存泄漏或意外的行为,特别是在组件销毁时。

如何取消订阅存储效果

1. 使用 takeUntil 操作符

在组件中,可以使用 takeUntil 操作符来监听组件的销毁事件,并在此时取消订阅 Effects。

代码语言:txt
复制
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Store } from '@ngrx/store';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { MyEffectService } from './my-effect.service';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my.component.css']
})
export class MyComponent implements OnInit, OnDestroy {
  private destroy$ = new Subject<void>();

  constructor(private store: Store, private myEffectService: MyEffectService) {}

  ngOnInit() {
    this.myEffectService.myEffect$.pipe(takeUntil(this.destroy$)).subscribe();
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

2. 使用 take(1) 操作符

如果 Effects 只需要运行一次,可以使用 take(1) 操作符来确保它在完成一次后自动取消订阅。

代码语言:txt
复制
import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { of } from 'rxjs';
import { catchError, map, mergeMap, take } from 'rxjs/operators';
import { MyService } from './my.service';
import { myAction, myActionSuccess, myActionFailure } from './my.actions';

@Injectable()
export class MyEffects {
  myEffect$ = createEffect(() =>
    this.actions$.pipe(
      ofType(myAction),
      mergeMap(() =>
        this.myService.doSomething().pipe(
          take(1), // 只取一次
          map(result => myActionSuccess({ result })),
          catchError(error => of(myActionFailure({ error })))
        )
      )
    )
  );

  constructor(
    private actions$: Actions,
    private myService: MyService
  ) {}
}

参考链接

通过以上方法,可以有效地取消订阅 NgRx 中的 Effects,避免内存泄漏和其他潜在问题。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【EventBus】EventBus 源码解析 ( 取消订阅 )

文章目录 一、取消订阅 二、取消订阅 unsubscribeByEventType 方法 一、取消订阅 ---- 【EventBus】EventBus 使用示例 ( 最简单的 EventBus 示例 )...示例中 , 在 MainActivity 中调用 // 取消注册 EventBus.getDefault().unregister(this); 方法 , 取消订阅 ;...取消订阅是以对象为单位的 , 一旦调用了 EventBus 的 unregister 方法 , 并传入 订阅者对象 , 则该订阅者对象中的所有 订阅方法 , 都会被 取消订阅 ; 在 【EventBus...订阅者类及相关的订阅方法 , 即可完成 取消订阅的操作 ; public class EventBus { /** 从所有事件类中注销给定订阅服务器。...是否是 取消注册的对象 , 如果是 , 直接将相应的 Subscription 对象从列表中移除 ; /** 仅按事件类型更新订阅,不按订阅类型更新订阅!

51510

怎样把取消订阅的用户吸引回来

这样一来,如果他们处在取消订阅边缘或者正在取消的时候你就会知道。做到这一点有很多方法。开发者实时通知,它会给你推送通知,比如「取消」、「暂停」、「重启」,总之,只要用户的状态一改变,就会推送通知。...提供他们无法拒绝的服务 我们假设可怕的事情发生了,一个用户想要取消订阅或者离开。使用不同的消息渠道,比如 站内信息,通知,邮件,短信,可以看到,开发者成功使用不同的方式去说服用户改变他们的注意。...Google Play 研究显示,那些赢回用户的方式更多地只是一种呼吁,因为,他们没有准确定位用户取消订阅的特殊原因,他们没有做假设。比如,不要假设价格是用户取消的唯一原因,想当然地提供一个折扣。...高亮用户没有使用过的或者他们取消后将失去的内容或者特性。Google Play 研究显示访问内容是大部分用户起初订阅或者持续订阅的原因,因此将内容作为留住用户的保留策略。...现在,你可以让用户恢复之前取消的订阅,但必须是他们的订阅还未到期。在订阅到期之前,你可以引导用户去订阅恢复按钮。

2.3K40
  • angular4实战(4)ngrx

    如下: ngrx地址:https://github.com/ngrx ngrx主要有四个模块,分别是 ngrx/store, ngrx/effects, ngrx/router-store..., ngrx/store-devtools 本次实例用的是ngrx 4.x版本,因为没有跟路由关联,也没有复杂的行为,只用到了ngrx/store。...ps:这里边个人理解是因为每一个简单类型的值,都会在新开栈上来存储,而对象不同,对象存在同一个指针的引用(是否可以类似深浅拷贝,这里打个问号); 一篇国外的文章帮助理解:https://blog.thoughtram.io...高中英语水平翻译一下:async这个管道,会返回订阅的Observe ,promise对象的最新的值,当观察者发现值有改变时,就会触发组件的检查策略,并且在组件销毁时也会自动的去取消订阅避免内存泄漏。...在本例中,如果把async这个过滤器取消的话,会造成一直loading,因为组件无法在监听到控制loading值的改变,也就无法更新视图了。

    1.1K30

    Android技能树 — Rxjava取消订阅小结(2):RxLifeCycle

    所以我们当Activity关闭的时候,我们这时候如果RxJava还没执行完,我们应该取消订阅。...因为一般取消订阅都是在onPause,onStop,onDestory情形下,所以优先先取消订阅,再去执行系统自己的操作。...最终我们只需要: myObservable.compose(bindUntilEvent(ActivityEvent.PAUSE)); 复制代码 2.1 自动设定取消订阅时间 自动取消订阅代码: @Override...lifecycle.skip(1): 既然我们一个Observable是记录了要取消订阅的事件,那我们第二个Observable就是在不同生命周期发送不同事件,当二个事件相同时候就说明要取消订阅了。...因为RxLifeCycle主要使用的是takeUntil,所以最后还是会执行onComplete,如果想取消订阅的时候不调用这个,还是可以直接使用原生的Disposable来进行取消订阅。

    2.1K30

    一个Angular 5教程:一步一步指导实现你的第一个Angular 5应用程序

    但是,尽管代替Observable的承诺将只运行一次并在此之后处理,但只要流正在更新并且我们不取消订阅,Observable就会持续运行。...所以我们的订阅需要取消订阅(如果我们不查找内存泄漏),如下所示: const subscription = observable.subscribe(value => console.log(value...现在它由于高度可维护的Ngrx商店而丢失了。也就是说,它存储在任何地方。...它将采取一个单一的价值,并取消订阅。但是实时订阅似乎更合理(假设系统中有多个用户),所以让我们更改我们的代码以处理订阅。...当我们从订阅中获取数据时,您只需要实现该Remove效果。但我会把它留给你。 路由和模块 我们来谈谈我们的应用程序组合。

    42.7K10

    python0070_ 字体样式_下划线_中划线_闪动效果_反相_取消效果

    继续尝试5m、6m 本应是 快闪、慢闪但是 现在看起来 效果是一样的 可以 编程实现 快闪效果吗?...20-2920-29 20 设置字体21-29部分和1-9一一对应 是取消相应的效果1是变亮 21 是取消变亮2是变暗 22 是取消变暗23-29 取消 3-9 的字体效果0 是全部取消效果0m 确实可以清除此后所有的样式...专门清除注意后面hate you 部分 取消了下划线样式但没有取消高亮样式除非 控制序列的 新要求 否则 标准输出流会一直保持 各种字体样式那么29m以后 控制的又是什么呢?...总结m 可以改变字体样式 0-9 之间设置的都是字体效果0 重置为默认1 变亮2 变暗3 斜体4 下划线5 慢闪6 快闪7 前景背景互换8 隐藏9 中划线叠加效果 \33[1;3moeasy;分割取消效果...21 取消 122 取消 223 取消 3一直到 290 是全部取消,回到默认最后发现 真的可以 设置颜色???

    1.1K20

    python0085_字体样式_下划线_中划线_闪动效果_反相_取消效果

    3m到10m 又是什么效果 呢?? ​...​ 添加图片注释,不超过 140 字(可选) 20-29 20-29 20 设置字体 21-29部分 和 1-9 一一对应 取消相应 的 效果 ​ 添加图片注释,不超过 140 字(...可选) 1是变亮 21 是取消变亮 2是变暗 22 是取消变暗 23-29 取消 3-9 的字体效果 0 是全部取消 效果 ​ 添加图片注释,不超过 140 字(可选) 0m 确实可以清除此后所有的样式...专门清除 ​ 添加图片注释,不超过 140 字(可选) 注意后面hate you 部分 取消了下划线样式 但没有取消高亮样式 ​ 添加图片注释,不超过 140 字(可选) 除非 控制序列的...33[1;3moeasy ;分割 取消效果 21 取消 1 22 取消 2 23 取消 3 一直到 29 0 是全部取消,回到默认 ​ 添加图片注释,不超过 140 字(可选)

    19810

    Angular 接入 NGRX 状态管理

    NGRX 状态管理生命周期图中包含了以下元素: Store:集中的状态存储; Action:根据用户所触的不同事件执行不同的 Action ; Reducer:根据不同的 Action 对 Store...中存储的状态做出相应的改变; Selector:用于获取存储状态切片的纯函数; Effects:基于流实现的副作用的处理,以减少基于外部交互的状态。...--standalone=false 安装 NGRX 核心模块: @ngrx/store:状态管理核心模块,包含了状态存储、Actions、Reducers、Selectors; @ngrx/store-devtools...} 创建存储 State 的 Store: 选项介绍: 选项 作用 --root 目标模块为根模块时设置 --module 提供目标模块的路径 --state-path 提供 State 存储的路径...UserActions.updateUser()); }, 5000); } } PS:以上案例完整代码可访问 github.com/OSpoon/angu… 接入实体 实体的引入对应单个用户状态的管理来说起到的效果并不明显

    28310

    HarmonyOS实战—实现抖音点赞和取消点赞效果

    双击点赞 和 双击取消点赞 如:在抖音中双击屏幕之后就可以点赞,小红心就会变亮 [在这里插入图片描述] 把白色和红色的心形图片复制到 media 下 [在这里插入图片描述] [在这里插入图片描述] 需要图片的可以自取...(上面已实现),再次双击屏幕之后,不会取消点赞,只有点击后红心之后才能取消点赞。 单击红心也可以点赞,再次单击红心就会取消点赞 实现思路: 给最外层的布局添加双击事件,双击之后点赞,变成红色心。...代码实现: 上面布局文件不变,MainAbilitySlice 如下: 给布局添加双击事件,因为再次双击不会取消点赞,所以把else代码里设置为红色后就把 flag 取反去掉,就不会出现再次双击取消点赞了...flag = true; } } } 运行: [在这里插入图片描述] 单击红心后: [在这里插入图片描述] 再次单击红心: [在这里插入图片描述] 双击屏幕后效果如下...,再次双击屏幕就不会取消点赞了,只有点击小红心才能取消点赞 [在这里插入图片描述]

    2K20

    和柳叶刀、细胞说再见:加州大学宣布取消所有Elsevier期刊订阅

    机器之心报道 机器之心编辑部 参与:李泽南 加利福尼亚大学系统近日正式宣布:它将停止订阅由全球最大的科学出版商爱思唯尔(Elsevier)出版的所有期刊。...因此,加州大学系统的期刊订阅已宣告中断,同时来自 UC 作者发表的所有论文立即免费向全球读者提供。 ? 加州大学与爱思唯尔的原有合同在 2018 年 12 月 31 日到期。...加州大学的行动或许已为爱思唯尔,以及其他出版商在订阅合同谈判中带来了很大压力,德国瑞典大学和实验室联盟与爱思唯尔正在进行的类似谈判目前也已陷入僵局,大学方面正在努力降低订阅费用。...UC 加利福尼亚数字图书馆执行副主任 Ivy Anderson 表示,加州大学寻求一次付费包含文献订阅与文章处理成本(APC)的合同,这可以让单篇文章被开放阅读。...爱思唯尔一直在收取订阅和 APC 的费用,Anderson 认为这是一种「双重收费」的形式。UC 系统一直在试图与出版商达成协议以降低学者们的阅读成本。

    70430

    视频集中存储云存储磁盘阵列EasyCVR平台分组批量绑定取消设备功能详解

    安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台视频能力丰富灵活,可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等,以及支持厂家私有协议与SDK接入,包括海康Ehome...在实际应用场景中,我们经常会遇到项目现场拥有大量的设备及通道数量,那么在这种情况下,通过批量操作进行“分组”绑定设备、取消设备,可迅速让用户直接将该设备下的通道绑定到分组,操作十分便捷,体验也更加友好。...该功能的前端展示效果如下:图片后端接口设计逻辑:1)前端需要传入分组id,设备id,操作类型opt:2)批量绑定设备,如下:图片3)批量取消操作,如下:图片该新功能的增加,给用户在设备管理操作中带来极大的便利

    21920
    领券