首页
学习
活动
专区
工具
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 的实现原理之前,先简单回顾一下它的关键要素与工作流。

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

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

    83720

    进阶 | 重新认识Angular

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

    2.6K10

    浅谈前端的状态管理(下)

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

    89920

    RxJS Subject

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

    2K31

    干货 | 浅谈React数据流管理

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

    2K20

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

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

    46510

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

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

    42.7K10

    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

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

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

    1.6K20

    Redux的设计模式

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

    1.5K20

    RxJS 快速入门

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

    1.9K20

    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.9K50

    从应用到源码-深入浅出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.7K71

    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 数组来维护的

    26410

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

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

    1.2K70
    领券