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

ngrx/effects switchMap在Angular2 RC5中不再有效

ngrx/effects switchMap在Angular2 RC5中不再有效。

在Angular2 RC5之前,ngrx/effects库中的switchMap操作符被广泛用于处理异步操作。switchMap操作符可以将一个Observable转换为另一个Observable,并且在每次源Observable发出新值时取消之前的订阅。

然而,在Angular2 RC5中,ngrx/effects库进行了一些重大的改变,其中包括对switchMap操作符的更改。在新版本中,switchMap操作符被替换为concatMap操作符。

concatMap操作符与switchMap操作符的作用类似,都可以将一个Observable转换为另一个Observable。但是,与switchMap不同的是,concatMap会按照顺序依次处理每个源Observable发出的值,而不会取消之前的订阅。

这个改变是为了解决在某些情况下,switchMap可能会导致意外的行为。例如,在处理并发请求时,switchMap可能会取消之前的请求,而只处理最新的请求。而concatMap会按照顺序处理所有的请求,确保每个请求都得到处理。

因此,在Angular2 RC5及更高版本中,如果你使用ngrx/effects库来处理异步操作,应该使用concatMap操作符替代switchMap操作符。

关于ngrx/effects库的更多信息和使用示例,你可以参考腾讯云的官方文档:ngrx/effects官方文档

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

相关·内容

Angular 接入 NGRX 状态管理

存储的状态做出相应的改变; Selector:用于获取存储状态切片的纯函数; Effects:基于流实现的副作用的处理,以减少基于外部交互的状态。...NGRX 状态管理包含了两条变更状态的主线: 同步变更状态:用户 => Action => Reducer => Store(State); 异步变更状态:用户 => Action => Effects... app.component.ts 构造函数中注入 Store: import { Store } from '@ngrx/store'; export class AppComponent {...安装 effects 核心模块: npm install @ngrx/effects --save 创建 User 的副作用: 选项介绍 : 选项 作用 --root 目标模块为根模块时设置 --module.../core'; import { Actions, createEffect } from '@ngrx/effects'; @Injectable() export class UserEffects

17510

调试 RxJS 第2部分: 日志篇

本文中,我将展示如何以一种不唐突的方式来使用 rxjs-spy 获取详情和有针对性的信息。 来看一个简单示例,示例中使用的是 rxjs 和 rxjs-spy 的 UMD bundles: ?...组成 observable 之前,示例启用了侦察,并为匹配 /user-.+/ 正则表达式或标签名为 users 的 observable 配置日志记录器。 示例的输入看上去应该是这样的: ?...当编写 redux-observable 的 epics 或 ngrxeffects 时,我见过一些开发者的代码大概是这样的: ? 乍看上去没什么问题,而且大多数情况下也能正常运行。... epic ,catch 返回的 observable 完成了,epic 也就完成了。 解决方法是将 map 和 catch 的调用移到 switchMap 里面,就像这样: ?...在这两个示例,对于被调试的代码来说,唯一需要修改就是是添加了某个标记注释。 注释是轻量级的,只需添加一次,我倾向于将它们留在代码

1.2K40

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

这里有一个有趣的小技巧:Angular,双向数据绑定已经不再适合我们了。但这并不意味着我们失去了访问这种行为的机会。...你不需要preventDefault每个事件监听器调用。要从组件发送数据,我们应该使用其有效载荷。所以我们需要订阅事件 - 我们该怎么做?...目前,我们HostListener函数检查NewCardInput的有效性。让我们将其移至更多模板驱动的表单。...为此,我们安装effects模块: yarn add @ngrx/effects [...] success Saved 1 new dependency. └─ @ngrx/effects@4.1.1...与之前一样的故事,我们使用扩展运算符打开我们的对象和卡阵列,并将其与扩展有效载荷(来自服务器的卡,我们的例子)结合起来。

42.5K10

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

前言 不探究高深理论,只探究实际使用,有更好的写法或者经验请指出; 有些暂时没涉及到的知识我可能会顺着例子解释; ---- 什么是服务 简言之:就是资源获取,以及通讯逻辑处理的地方; Angular2...详情看这个; 【依赖注入:】 【依赖注入:英】 我看github上有些项目的service写的很复杂(很重),但是我不大喜欢这样。 我力求service内少处理复杂逻辑。...{ super(router, activatedRoute); } ngOnInit() { } } // 若是要使用别名注入,还需要引入Inject,从core里面 -- components...然后放在construcor里面,写法如下 // constructor(@Inject('vfault') private vehicleFaultService: any) // 这样就可以使用了,且components...fadeIn], providers: [vehicleFaultService, EventsService] })复制代码 ---- 总结 服务若是结合@Inpu(),@Output()..感觉不需要ngrx

1.6K20

构建流式应用:RxJS 详解

流是时间流逝的过程中产生的一系列事件。它具有时间与事件响应的概念。 下雨天时,雨滴随时间推移逐渐产生,下落时对水面产生了水波纹的影响,这跟 Rx 的流是很类似的。...complete() 当不再有新的值发出时,将触发 Observer 的 complete 方法;而在 Iterator ,则需要在 next 的返回结果,当返回元素 done 为 true 时,则表示... RxJS ,把这类操作流的方式称之为 Operators(操作)。RxJS提供了一系列 Operators,像map、reduce、filter 等等。...上面示例已有涉及,这里不再多讲。...,A 和 B 是主干上产生的流,a1、a2 为 A 分支上产生,b1、b2 为 B 分支上产生,可看到,最终将归并到主干上。

7.2K31

写在 2021: 值得关注学习的前端框架和工具库

虽然这样也造成我目前没有特别深入的方向,比如21届的大佬们工程化、微前端、AST、NodeJS等等方向都已经开始深耕,我还在追着各种新框架学当弟弟,但不得不说,在学习新事物的过程,你会逐渐对这些框架进行分类...IceStore[3],淘系Ice团队出品的状态管理库,我日常业务中使用最多的一个状态管理方案,亮点是基于Immer来实现数据不可变,整体的使用方案类似Dva,state + reducer + effects...你可能同样犹豫要不要学这玩意,我的意见是:学!因为确实NodeJS目前没有特别全面的框架(虽然NestJSSpring面前也是弟弟)。...Reactive.How[92],生动的展示RxJS Observable操作符管道的流动,入门期间使用有奇效。...秉承了Angular的思想,提供了一整套的集成:和Angular Router的集成:@ngrx/router-store;对于集合类型的适配:@ngrx/entity;副作用管理:@ngrx/effects

4.2K10

Angular的12个经典问题,看看你能答对几个?(文末附带Angular测试)

Angular2,组件中发生的任何改变总是从当前组件传播到其所有子组件。如果一个子组件的更改需要反映到其父组件的层次结构,我们可以通过使用事件发射器api来发出事件。...因为它缓存的DOM将在浏览器呈现得更快,并提供更好的性能。此外,还可以相对很好地管理shadow DOM,同时检测Angular 2应用的改变,并且可以有效地管理视图的重新绘制。...优点: 更快的下载:由于应用程序已经编译,许多Angular编译器相关库就不再需要捆绑,应用程序包变得更小,所以该应用程序可以更快地下载。...其中,反应最为迅速的就是Wijmo,Wijmo Angular2 发布几个小时后就发布了支持 Angular2 正式版本的 Wijmo。...Wijmo 为每一个UI控件都提供了 Angular2 组件。所有 Angular2 组件都提供了完全声明性标记。

17.3K80

理解协程、LiveData 和 Flow

实际应用,以我们的 Android Dev Summit 应用为例,里面涉及到的作用域非常多。...比如针对导航组件,您可以将作用域限制登录流程或者结账流程。我们甚至还有针对整个 Application 的作用域。 ? 有如此多的操作会同时进行,我们需要有一个更好的方法来管理它们的取消操作。...这个可以理解为针对操作的垃圾搜集器,当一个操作不再需要被执行时,协程会自动取消它。...() { while(true) { // Compute delay(1000) } } 复制代码 在上面这个无限循环里,每一个 delay 都会检查协程是否处于有效状态...这时我们可以使用 switchMap,从而可以通过 liveData 协程构造方法获得一个 LiveData,而且 switchMap 的方法会在每次数据源 LiveData 更新时调用。

2.1K20

使用 Architecture Component 实现 MVVM 的正确姿势

一、MVVM 之初体验 网上关于 MVVM 的介绍非常多,这里不再赘述,直接看一个例子,用直观的代码来感受一下用 MVVM 开发,是一种什么样的感受 class MvvmViewModel : ViewModel... MVVM ,ViewModel 充当 View 和 Model 之前数据中转和逻辑处理的角色 image.png ViewModel 的生命周期 ViewModel 的生命周期和创建 ViewModel...,并返回一个 LiveData val uiModel: LiveData = Transformations.switchMap(UserRepo.userData...和 Repo 之间也是用 LiveData 通信的场景下,可以有效防止 ViewModel 泄露的问题 一对多的转换 —— MediatorLiveData Transforms 的 map() 和...switchMap() 实际上内部都是用了一个叫 MediatorLiveData 的封装类,使用这个类可以将多个 LiveData 组合起来,实现监听多个 LiveData 变化的功能 image.png

75920

谷歌官方Android应用架构库——LiveData

正确处理配置更改:如果 activity 或 fragment 由于配置更改(如:设备旋转)重新创建,将会立即收到最新的有效位置数据。...不再手动管理生命周期:fragment 只是需要的时候观察数据,不用担心被停止或者停止之后启动观察。...;LiveData user = Transformations.switchMap(userId, id -> getUser(id) ); 使用这些转换允许整个调用链携带观察者的 Lifecycle...每当你认为 ViewModel 需要一个 Lifecycle 类时,转换可能是解决方案。 例如:假设有一个 UI,用户输入一个地址然后会收到该地址的邮政编码。...创建新的转换 应用程序可能会用到十几种不同的特定转换,但是默认是不提供的。

1.1K30

简单红外线解码

对于Philips RC5或RC6遥控器,每按一次键,代码的一位就会切换一次。接收器使用此切换位来确定何时再次按下某个键。...RC5:12个或更多位首先发送最高有效位。该消息以两个起始位开头,这两个起始位不属于代码值。(协议详细信息) RC6:传输20(通常)位,最高有效位在前。...(协议详细信息) 对于Sony和RC5 / 6,每次传输必须按照协议的规定重复3次。传输代码未实现RC5 / 6触发位。这取决于来电者。 添加新协议 制造商已经实现了比该库支持更多的协议。...对于RC5 / 6,切换位必须在连续传输中被调用代码翻转,否则接收器可能仅对代码响应一次。 最后,该库可能存在错误。特别是,我没有收到RC5 / RC6的任何东西,因此它们未经测试。...如果代码已收到但无法解码,请确保代码受支持的协议之一。如果应该解码而不是解码,则某些测量时间可能不在预期时间的20%容忍范围内。您可以打印出最小和最大期望值,并与原始测量值进行比较。

2.1K40

写在2021: 值得关注学习的前端框架和工具库

虽然这样也造成我目前没有特别深入的方向,比如21届的大佬们工程化、微前端、AST、NodeJS等等方向都已经开始深耕,我还在追着各种新框架学当弟弟,但不得不说,在学习新事物的过程,你会逐渐对这些框架进行分类...IceStore,淘系Ice团队出品的状态管理库,我日常业务中使用最多的一个状态管理方案,亮点是基于Immer来实现数据不可变,整体的使用方案类似Dva,state + reducer + effects...你可能同样犹豫要不要学这玩意,我的意见是:学! 因为确实NodeJS目前没有特别全面的框架(虽然NestJSSpring面前也是弟弟)。...Reactive.How,生动的展示RxJS Observable操作符管道的流动,入门期间使用有奇效。...秉承了Angular的思想,提供了一整套的集成:和Angular Router的集成:@ngrx/router-store;对于集合类型的适配:@ngrx/entity;副作用管理:@ngrx/effects

2.8K10

AndroidJetpack Livedata应用场景分析

中注册 Livedata 监听(因为 onStart 和 onResume 中进行监听可能会有冗余调用) Livedata 简单使用 仍然还是用我们倒计时的例子, Viewmodel 开始一个...本例实现的 demo 效果是,创建一个全局的倒计时,然后 Activity 添加两个按钮,点击后可以切换 FragmentA 和 FragmentB。...两个方法可以对已有的 Livedata 进行转换得到新的 Livedata Transformation.map activity 中观察 viewmodel 的数据更新,当点击 activity...mapLiveData 是对 userLivedata 进行转换得到的,所以当我们调用 sendData 方法更新 userLivedata 的方法时,mapLiveData 的回调也会触发 activity...本例我们实现如下逻辑: activity 中观察 viewmodel 的数据更新,当点击 activity 按钮的时候会调用 viewmodel.sendData 方法发送数据,然后发送的数据会做一定的转换给

1K20

Web开发在过去20多年时间里如何改变了我

2001年,我开始陶醉于ASP.NET和VB.NET,并用到了产品,直到2006年底才不再这么干。2007年年底,我开始使用C#编写ASP.NET。...HTML和JavaScript仍然参与其中,但多多少少被封装在第三方控件,并且jQuery当时是JavaScript的别名。JavaScript的一切都是jQuery。...ASP.NET WebForms感觉巨大又不是很灵活,但它能有效工作。后来——2010年——我用Silverlight、WinForms和WPF做了很多东西。...Angular2是应该好好研究TypeScript的一个原因,因为现在的Angular2完全是用TypeScript写的。...当然类型化的语言很多情况下也是有用的,但是——使用JS工作了20年——我喜欢隐式的类型JavaScript语言的灵活性,并且我对它很熟。

1.5K60

PagingRecyclerView的应用,有这一篇就够了

下面我们通过两个具体实例来对Paging进行了解 Database的使用 自定义DataSource 2 Database的使用 PagingDatabase的使用非常简单,它与Room结合将操作简单到了极致...第一步就这么简单,接下来看第二步 2.2 LiveData 现在我们ViewMode调用上面的getAll方法获取所有的文章信息,并且将返回的数据封装成一个LiveData,具体如下: class...PositionalDataSource: 通过在数据的position作为key,来获取下一页数据。这个典型的就是上面所说的Database的运用。...这样我们就可以loadAfter的params参数获取到: override fun loadAfter(params: LoadParams, callback: LoadCallback...PagedListAdapter & Activity Adapter部分与Database的基本类似,主要也是需要实现DiffUtil.ItemCallback,剩下的就是正常的Adapter实现,我这里就不再多说了

1.3K20
领券