[RxJS] Refactoring CombineLatest to WithLatestFrom

This lesson shows why it’s preferable to using withLatestFrom instead of combineLatest in certain scenarios.

 

Timer will continue until you enter the number in the input field:

复制代码
timer$
    .do((x)=> console.log(x))
    .combineLatest(
        input$.do((x)=> console.log(x)),
        (timer, input)=> ({count: timer.count, text: input})
    )
    .takeWhile((data)=> data.count <= 3)
    .filter((data)=> data.count === parseInt(data.text))
    .reduce((acc, curr)=> acc + 1, 0)
    .subscribe(
        (x)=> console.log(x),
        err=> console.log(err),
        ()=> console.log('complete')
    );
复制代码

 

In this case, withLatestFrom() works the same way:

复制代码
timer$
    .do((x)=> console.log(x))
    .withLatestFrom(
        input$.do((x)=> console.log(x)),
        (timer, input)=> ({count: timer.count, text: input})
    )
    .takeWhile((data)=> data.count <= 3)
    .filter((data)=> data.count === parseInt(data.text))
    .reduce((acc, curr)=> acc + 1, 0)
    .subscribe(
        (x)=> console.log(x),
        err=> console.log(err),
        ()=> console.log('complete')
    );
复制代码

 

But let's say we only want the timer log out 3 times then it should hit the complete block, logout "complete":

复制代码
timer$
    .do((x)=> console.log(x))
    .takeWhile((data)=> data.count <= 3)
    .withLatestFrom(
        input$.do((x)=> console.log(x)),
        (timer, input)=> ({count: timer.count, text: input})
    )
    .filter((data)=> data.count === parseInt(data.text))
    .reduce((acc, curr)=> acc + 1, 0)
    .subscribe(
        (x)=> console.log(x),
        err=> console.log(err),
        ()=> console.log('complete')
    );
复制代码

then it only works with withLatestFrom() NOT combimeLatest().

The reason for that is combimeLatest require both timer$ and input$. But withLatestFrom() only need $timer.

 

posted @   Zhentiw  阅读(543)  评论(0编辑  收藏  举报
(评论功能已被禁用)
编辑推荐:
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
阅读排行:
· 如何给本地部署的DeepSeek投喂数据,让他更懂你
· 超详细,DeepSeek 接入PyCharm实现AI编程!(支持本地部署DeepSeek及官方Dee
· 用 DeepSeek 给对象做个网站,她一定感动坏了
· .NET 8.0 + Linux 香橙派,实现高效的 IoT 数据采集与控制解决方案
· DeepSeek处理自有业务的案例:让AI给你写一份小众编辑器(EverEdit)的语法着色文件
点击右上角即可分享
微信分享提示