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

Angular Redux @select()对象,那么我可以在我的控制器中订阅它吗?这个模式还会取消订阅我的onDestroy吗?

Angular Redux是一种用于管理应用程序状态的库,它结合了Angular框架和Redux模式。在Angular Redux中,@select()装饰器用于从Redux存储中选择特定的状态,并将其绑定到组件的属性上。

如果你在控制器中使用@select()装饰器订阅了一个对象,那么你可以在控制器中访问和使用该对象的值。当Redux存储中的状态发生变化时,订阅的对象也会更新。

关于取消订阅的问题,Angular提供了一个生命周期钩子函数ngOnDestroy,用于在组件销毁时执行清理操作。如果你在控制器中订阅了一个对象,并在ngOnDestroy中取消订阅,那么当组件销毁时,订阅也会被取消,以避免内存泄漏和不必要的订阅。

以下是一个示例代码,展示了如何在控制器中订阅和取消订阅@select()对象:

代码语言:txt
复制
import { Component, OnDestroy } from '@angular/core';
import { select } from '@angular-redux/store';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-my-component',
  template: '...',
})
export class MyComponent implements OnDestroy {
  @select(['myState', 'myProperty']) myObject$: Observable<any>;
  private subscription: Subscription;

  constructor() {
    this.subscription = this.myObject$.subscribe((value) => {
      // 处理订阅对象的值变化
    });
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

在上面的示例中,我们使用@select()装饰器订阅了名为'myState'的Redux存储中的'myProperty'属性。在构造函数中,我们创建了一个订阅,并在ngOnDestroy中取消了订阅。

推荐的腾讯云相关产品是腾讯云云服务器(CVM),它提供了可靠的云计算基础设施,适用于各种规模的应用程序和工作负载。您可以通过以下链接了解更多关于腾讯云云服务器的信息:腾讯云云服务器

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

相关·内容

Rxjs&Angular-退订可观察对象n种方式

方式一 "常规"取消订阅方式 最简单订阅取消订阅一个可观察对象方式是 ngOnInit 方法订阅可观察对象(Observable), 然后组件类创建一个类属性用来保存这个订阅(Subscription...但是当我们有多个订阅对象(Subscription)时, 针对每一个我们都需要在组件类创建一个字段保存这个对象引用并在 ngOnDestroy 调用 unsubscribe来取消订阅....: 使用这种方式, 我们可以使用RsJS内建方法轻松取消订阅多个可观察对象而不必组件类创建多个字段保存订阅对象引用....方式五 SubSink 库 SubSink是Ward Bell写一个很棒库, 使你可以优雅在你组件取消对可观察对象订阅...., 他可以帮你自动取消对可观察对象订阅.

1.2K00

第十八篇: 揭秘 Redux 设计思想与工作原理(上)

这些年不管是面试、还是帮读者答疑,有一个很强烈感受:很多人对 Redux 基本操作很熟悉,甚至对运作机制也有所了解,但就是不明白为什么要用 Redux,更不清楚 Redux 到底解决了什么问题...Redux 背后架构思想:认识 Flux 架构  Redux 设计很大程度上受益于 Flux 架构,我们可以认为 Redux 是 Flux 一种实现形式(虽然并不严格遵循 Flux 设定),...在这个过程,数据流应该是单向。 事实上,许多服务端 MVC 应用,数据流确实能够保持单向。...Redux 关键要素与工作流回顾 Redux 库和 Flux 架构之间可以说是“你侬侬”,虽然 Redux 实现层面并没有按照 Flux 那一套来(比如 Flux 中允许多个 Store 存在,而...基于 Flux 思想背景去理解 Redux 这个落地产物,你学习曲线将会更加平滑一些。 接下来我们介绍 Redux 实现原理之前,先简单回顾一下关键要素与工作流。

67510

「React18新特性」深度解读之useMutableSource

或许可以用一段代码来表示从 react-redux state 改变到视图更新流程。...github 上例子,讲一下具体怎么使用: 例子一 例子一:订阅 history 模式下路由变化 比如有一个场景就是非人为情况下,订阅路由变化,展示对应 location.pathname,看一下是如何使用...location.pathname 字段,这个可以复用,当路由发生变化时候,那么会调用快照函数,来形成新快照信息。...获取快照信息,这里获取是 location.pathname 字段,这个可以复用,当路由发生变化时候,那么会调用快照函数,来形成新快照信息。...接下来让我们看一下效果: 4.gif 四 原理分析 useMutableSource 已经 React v18 规划之中了,那么实现原理以及细节, V18 正式推出之前可以还会有调整, 1

81020

进阶 | 重新认识Angular

Vue使用发布订阅模式,是点对点绑定数据。 Proxy可以理解成,目标对象之前架设一层“拦截”,外界对该对象访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界访问进行过滤和改写。...依赖注入 Angular依赖注入可谓是灵魂了,之前有篇详细讲这个文章《谈谈Angular2依赖注入》。...---- 核心思想: 数据响应式 Promise => 允诺 Rxjs => 由订阅/发布模式引出来 Promise顾名思义,提供是一个允诺,这个允诺就是调用then之后,它会在未来某个时间段把异步得到...Rx不是允诺,本质上还是由订阅/发布模式引出来核心思想就是数据响应式,源头是数据产生者,经过一系列变换/过滤/合并操作,被数据消费者所使用,数据消费者何时响应,完全取决于数据流何时能流下来...Rx数据是否流出不取决于是否subscribe,也就是说一个observable未被订阅时候也可以流出数据,之后它被订阅过后,先前数据是无法被数据消费者所查知,所以Rx还引入了一个lazy模式

2.5K10

浅谈前端状态管理(下)

和大多数状态管理方案一样,Redux 思想也是发布订阅模式,我们还是以图书馆为例来简单了解一下 Redux。...const unsubscribe = store.subscribe(() => { render() { // 更新view } }) // 也可以取消订阅(监听) unsubscribe...尽管 Redux 里还是没办法做到一切都是确定(如异步)但是应该保证大多数部分都是确定包括: 视图渲染是可确定 状态重建是可确定 至于为什么要这么做,上一篇已有提及。...倘若项目不大,用 Redux 或 Vuex 是不是会显得有些大?我们知道 Vue 中有提供 keep-alive 让我们缓存当前组件,这样就可以解决上述场景。...社区方案普遍是改造路由,但是这种改造对于项目入侵过大且不易维护,另外在 react-router v5 取消了路由钩子。于是,对小型项目来说自己封装一个函数也不失为良策。

87320

vue响应式原理(数据双向绑定原理)

比如React,它也有一定程度主张,主张主要是函数式编程理念,比如说,你需要知道什么是副作用,什么是纯函数,如何隔离副作用。侵入性看似没有Angular那么强,主要因为它是软性侵入。...Vue可能有些方面是不如React,不如Angular,但它是渐进,没有强主张,你可以原有大系统上面,把一两个组件改用它实现,当jQuery用;也可以整个用它全家桶开发,当Angular用;还可以用它视图...你可以底层数据逻辑地方用OO和设计模式那套理念,也可以函数式,都可以只是个轻量视图而已,只做了自己该做事,没有做不该做事,仅此而已。 渐进式含义,理解是:没有多做职责之外事。...Vue实现数据双向绑定原理: 如new Vue一个实例对象a,其中有一个属性a.b,那么实例化过程,通过Object.defineProperty()会对a.b添加getter和setter,同时...首先,需要对observe数据对象进行递归遍历,包括子属性对象属性,都加上setter getter。这样的话,给这个对象某个属性赋值,就会触发setter,那么就能监听到数据变化。

2.7K40

干货 | 浅谈React数据流管理

这种模式有利有弊,有利就是一个大型多人团队,这种开发模式反而容易形成一种规约,让整个状态流程变得清晰,弊端就是对于小规模团队,尤其是着急发布上线,这种繁重代码模板无疑是一种负担。...如果说redux那种强硬函数式编程模式让很多人难以接受,那么当他们开始mobx使用时候,无疑是一种解脱。...); 5)完全可以替代react自身状态管理; 6)支持typescript; 但是mobx真的这么完美,当然也有缺陷: 1)没有状态回溯能力:mobx是直接修改对象引用,所以很难去做状态回溯;(这点...观察者模式,有两个重要角色:Observable和Observer,熟悉mobx同学对这个一定不陌生(所以我建议想要学习rxjs同学,如果对mobx不熟悉,可以先学习一下mobx,然后再学习rxjs...rxjs,作为事件响应者(消费者)Observer对象也有一个next属性(回调函数),用来接收从发布者那里“推”过来数据。

1.9K20

RxJS Subject

观察者模式 观察者模式定义了一种一对多关系,让多个观察者对象同时监听某一个主题对象这个主题对象状态发生变化时就会通知所有的观察者对象,使得它们能够自动更新自己。...我们可以使用日常生活,期刊订阅例子来形象地解释一下上面的概念。期刊订阅包含两个主要角色:期刊出版方和订阅者,他们之间关系如下: 期刊出版方 —— 负责期刊出版和发行工作。...观察者模式也有两个主要角色:Subject(主题)和 Observer (观察者),它们分别对应例子期刊出版方和订阅者。...RxJS Subject & Observable Subject 其实是观察者模式实现,所以当观察者订阅 Subject 对象时,Subject 对象会把订阅者添加到观察者列表,每当有 subject...Angular RxJS Subject 应用 Angular ,我们可以利用 RxJS Subject 来实现组件间通信,具体示例如下: message.service.ts import {

2K31

38. 精读《dob - 框架使用》

不过相对而言,应该算是接地气一些,既没有要求纯函数式和分离副作用,也没有 cyclejs 那么抽象,只要入门面向对象,就可以用好。...约束大部分由框架提供,比如开启严格模式后,禁止 Action 外修改变量。然而纠结最多地方还是约定上,写 dob 框架前后,总结出了一套使用约定,可能仅对这种响应式数据流管用。...每个组件都要 Connect 对于 Mvvm 思想库,Connect 概念不仅仅在于注入数据(与 redux 不同),还会监听数据变化触发 rerender。...事情,感兴趣可以读读这篇文章:Redux 使用可变数据结构,介绍了这个黑魔法实现原理。...异步与副作用 Redux 自然而然用 action 隔离了副作用与异步,那只有 action Mvvm 开发模式,异步需要如何隔离?

44010

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

从版本2开始,Angular不再是一个JavaScript框架,所以它们之间有很大区别,保证了一个基本名称变更。 应该使用Angular?...如果您在AngularJS中有一些背景知识,那么您知道存在控制器,指令和组件,这些控制器,指令和组件某种程度上类似于指令但更简单,允许您升级到Angular 2.对于那些没有那种精彩体验用户他们并找出什么地方...如果您对我们为什么这么做感到好奇,可以Angular文档阅读。...每次用户向我们输入和浏览器输出输入数据时input $event,我们都会将其分配newCard.text给输入值。 我们实现之前还有一件事:这个输入看起来有点多,不是?...“Redux是一种管理应用程序状态模式。”

42.5K10

Redux设计模式

Redux是一种设计模式同时也是一种项目架构方案,他不依赖任何库或者任何框架,他不仅可以React中使用甚至Angular和Vue可以使用。...通过使用Redux我们可以剥离出组件数据(state),将所有数据统一存放在Redux数据(store)仓库,如果组件哪一个组件需要使用到数据,这个组件可以去数据仓库自行认领有个高大上叫法是订阅...如果组件对store数据进行了更新那么store会向订阅这个数据所有组件推送最新数据,这就是Redux原理。...Store中保存是全局数据,对于Redux项目来说有且只有一个Store,我们可以看做一个带有推送功能数据仓库。我们可以借用微信朋友圈来理解这个概念。...getState来获取数据,通过subscribe订阅来监听数据变化,因为Redux是一种发布订阅模式,只有监听才会获取到。

1.5K20

Angular 2 + 折腾记 :(3)初步了解服务及使用

前言 不探究高深理论,只探究实际使用,有更好写法或者经验请指出; 有些暂时没涉及到知识可能会顺着例子解释; ---- 什么是服务 简言之:就是资源获取,以及通讯逻辑处理地方; Angular2...详情看这个; 【依赖注入:】 【依赖注入:英】 看github上有些项目的service写很复杂(很重),但是不大喜欢这样。 力求service内少处理复杂逻辑。...{ return this.authHttp.post(environment.baseUrl + 'VehicleFault/ClearFault', data); } // 这里每个接口返回一个可观察订阅对象...}复制代码 那么我们应该如何让服务可以正常使用呢?...大致有那么两种; 模块内注入,整个模块内components皆可以使用 import { NgModule } from '@angular/core'; -- 内置 // 除了根模块用

1.6K20

RxJS & React-Observables 硬核入门指南

Observer 观察者模式 观察者模式,一个名为“可观察对象(Observable)”或“Subject”对象维护着一个名为“观察者(Observers)”订阅者集合。...它能组合和取消异步操作,以创建副作用和更多功能。 Redux,无论何时dispatch一个action,都会运行所有的reducer函数,并返回一个新状态state。...它能组合和取消异步操作,以创建副作用和更多功能。 Redux,无论何时dispatch一个action,都会运行所有的reducer函数,并返回一个新状态state。...Epic内部,我们可以使用任何RxJS可观察模式,这就是为什么redux-observable很有用。 例如:我们可以使用.filter操作符创建一个新中间可观察对象。...本节将比较redux-observable和redux-thunk,以展示redux-observable如何在复杂用例中发挥作用。

6.8K50

RxJS 快速入门

仍然以电商为例,如果某商户订单不允许取消,你还会去买?...换句话说,负责生产数据,别人可以消费生产数据。 如果你是个资深后端,那么可能还记得 MessageQueue 工作模式,它们很像。如果不懂 MQ 也没关系,还是用日常知识给你打个比方。...坑与最佳实践 取消订阅 subscribe 之后,你回调函数就被别人引用了,因此如果不撤销对这个回调函数引用,那么与它相关内存就永远不会释放,同时,仍然会在流中有数据过来时被调用,可能会导致奇怪...把保存下来,等恰当时机调用它 unsubscribe 方法就可以取消订阅了。...比如在 Angular ,如果你订阅了无尽流,那么就需要把订阅凭证保存在私有变量里,并且 ngOnDestroy 回调调用它 unsubscribe 方法。

1.8K20

从应用到源码-深入浅出Redux

需要额外注意是, redux 要求每个 reducer 函数匹配到对应 action 时需要返回一个全新对象(两个对象拥有完全不同内存空间地址)。...那么 nextListeners 方法是哪里来呢? 恰恰是通过 createStore 返回 subscribe 进行订阅逻辑非常简单,相信不少同学已经可以猜出来它是如何实现。...同样也是利用闭包特性配合发布订阅模式,通过 subscribe 方法传入 listener 进行订阅每次 action 派发结束后依次调用订阅 listener。...完整源码地址你可以在这里查阅到,想说是其实上述实现代码已经可以说一比一还原了 redux createStore 源码了。...上边我们按照步骤实现了一个简单 Redux-Thunk 中间件,支持我们传入 action 类型为一个函数。此时我们就可以 Redux 完美的使用异步 Action 。

1.3K10

Redux源码浅析

那么store和state分别是什么样数据结构,修改state又经过了哪些过程,Redux是怎么保证这些限制得到落实?带着这些问题,我们开始读源码。...2.2 订阅取消:Subscribe & unsubscribe订阅取消也是Redux store中提供重要API,展开后subscribe方法如下:图片除去一些检查,Redux订阅就是简单实现了一个观察者模式...)来保存监听函数,并且订阅取消订阅时候使用了ensureCanMutateListeners方法来执行浅拷贝:图片这里产生了很大疑问,为什么要用如此不直观方法来保存监听者。...5. redux中间件:applyMiddleware和compose很多框架如koa等都有中间件概念,在这些框架,中间件可以让你在接收请求和生成响应之间放置一些代码,Redux也一样,中间件机制...对于一个简单中间件如打印简单日志,基本长这样:图片原本对Redux中间件并不熟悉,所以先去看了一下官方概念,对了解中间件为什么要这么写有很大帮助。

1.6K71

angular4实战(4)ngrx

详情参考之前文章:http://blog.csdn.net/j_bleach/article/details/78070539。ngrx和react-redux本质没什么区别。...,才会启动检查策略,这里值注意是,这个输入对象需要变化成一个新对象时,组件才会进行检查,而不是仅仅是改变属性值,或者增减对象元素。...(前提是元数据设置了changeDetection: ChangeDetectionStrategy.OnPush) 在此设置基础下,想要启动策略,就需要返回新对象和数组。...高中英语水平翻译一下:async这个管道,会返回订阅Observe ,promise对象最新值,当观察者发现值有改变时,就会触发组件检查策略,并且组件销毁时也会自动取消订阅避免内存泄漏。...本例,如果把async这个过滤器取消的话,会造成一直loading,因为组件无法监听到控制loading值改变,也就无法更新视图了。

1.1K30

第十九篇: 揭秘 Redux 设计思想与工作原理(下)

这和我们平时见到“发布-订阅模式好像不太一样。 要弄明白这两个问题,我们需要先了解 subscribe 这个 API。 2....Redux “发布-订阅模式:认识 subscribe dispatch 执行 listeners 数组从订阅来,而执行订阅需要调用 subscribe。...subscribe 接收一个 Function 类型 listener 作为入参,返回内容恰恰就是这个 listener 对应解绑函数。...这是因为 Redux 已经默认了订阅对象就是“状态变化(准确地说是 dispatch 函数调用)"这个事件。...首先,我们可以 store 对象创建成功后,通过调用 store.subscribe 来注册监听函数,也可以通过调用 subscribe 返回函数来解绑监听函数,监听函数是用 listeners 数组来维护

18910

透过现象看本质: 常见前端架构风格和案例

而中间件还有一个回归过程,当下游处理完毕后会进行回溯,所以有机会干预下游处理结果。 谷歌上搜了老半天中间件,对于中间件都没有得到一个令我满意定义. 暂且把当作一个特殊形式管道模式吧。...定义了一种一对多依赖关系, 事件驱动系统风格,组件不直接调用另一个组件,而是触发或广播一个或多个事件。系统其他组件一个或多个事件中注册。...生活也有很多发布-订阅例子,比如微信公众号信息订阅,当新增一个订阅时候,发布者并不需要作出任何调整,同样发布者调整时候也不会影响到订阅者,只要协议没有变化。...JavaScript基因决定事件驱动模式在前端领域广泛使用. 浏览器和NodeJavaScript是如何工作?...你可以通过扩展阅读了解这些模式 面向对象风格: 将应用或系统任务分割为单独、可复用、可自给对象,每个对象都包含数据、以及对象相关行为 C/S 客户端/服务器风格 面向服务架构(SOA): 指那些利用契约和消息将功能暴露为服务

1.1K70
领券