The use case is similar to Twitter "like" button, you can click "click" button on different post, each "like" button are isolated, it preforms optimistic UI render, handling the back-press on backend, cancel previous request only for the same twitter id.

In the talk of RxJS. It use Movie as example.

So, if you have similar use case, this piece of code can help:

import { Observable, fromEvent, Subject, EMPTY } from 'rxjs';
import { tap, mergeMap, groupBy, timeoutWith, ignoreElements, switchMap } from 'rxjs/operators'; const actions$ = dispatcher.asObservable().pipe(
// optimize ui rendering
tap(({ movieId }) => setButtonEmoji(movieId)),
// group all the request by movieId
groupBy(
movie => movie.movieId,
movie => movie,
// cancel the extra requests to prevent memory leak by set 15s idel time
actionsByGroup$ =>
actionsByGroup$.pipe(
timeoutWith(, EMPTY),
ignoreElements()
)
),
// for each group of request, we apply switchMap to cancel previous request
// finally flatten the requests into one
mergeMap(group$ => group$.pipe(switchMap(movie => toggleStatus(movie.movieId))))
);

[RxJS] Groupby operator的更多相关文章

  1. rxjs自定义operator

    rxjs自定义operator

  2. [RxJS] Creation operator: of()

    RxJS is a lot about the so-called "operators". We will learn most of the important operato ...

  3. [RxJS] Connection operator: multicast and connect

    We have seen how Subjects are useful for sharing an execution of an RxJS observable to multiple obse ...

  4. [RxJS] Transformation operator: repeat

    Operator repeat() is somewhat similar to retry(), but is not for handling operators. In this lesson ...

  5. [RxJS] Transformation operator: buffer, bufferCount, bufferTime

    This lesson will teach you about another horizontal combination operator: buffer and its variants. B ...

  6. [RxJS] Transformation operator: scan

    All of the combination operators take two or more observables as input. These operators may also be ...

  7. [RxJS] Combination operator: withLatestFrom

    Operator combineLatest is not the only AND-style combinator. In this lesson we will explore withLate ...

  8. [RxJS] Combination operator: combineLatest

    While merge is an OR-style combination operator, combineLatest is an AND-style combination operator. ...

  9. [RxJS] Filtering operator: filter

    This lesson introduces filter: an operator that allows us to let only certain events pass, while ign ...

随机推荐

  1. JVM——java内存模型和线程

    概述 计算机的运算速度与它的存储和通信子系统速度的差距太大,大量的时间都花费在磁盘I/O.网络通信或者数据库访问上.我们当然不希望处理器大部分时间都处于等待其他资源的状态,要通过一些“手段”去把处理器 ...

  2. STL源码剖析——序列式容器#2 List

    list就是链表的实现,链表是什么,我就不再解释了.list的好处就是每次插入或删除一个元素,都是常数的时空复杂度.但遍历或访问就需要O(n)的时间. List本身其实不难理解,难点在于某些功能函数的 ...

  3. 常用Tables控件介绍(二)

    初始化:1.使用现有表单创建数据表格,定义在HTML中的字段和数据 2.使用现有的table创建数据表格,定义在HTML中的字段 3.使用JS创建数据库表格 一.初始化后,根据单元格内的值,修改显示内 ...

  4. Django框架深入了解_03(DRF之认证组件、权限组件、频率组件、token)

    一.认证组件 使用方法: ①写一个认证类,新建文件:my_examine.py # 导入需要继承的基类BaseAuthentication from rest_framework.authentica ...

  5. docker-compose 单机容器编排

    docker-compose用来在单机上编排容器(定义和运行多个容器,使容器能互通) docker-compose将所管理的容器分为3层结构:project  service  container d ...

  6. [高清] 深入浅出Spring Boot 2.x.pdf + 代码

    ------ 郑重声明 --------- 资源来自网络,纯粹共享交流, 如果喜欢,请您务必支持正版!! --------------------------------------------- 下 ...

  7. TypeScript_泛型

    typescript 中很多地方都和 java 和 C# 相似,如果 有 java 和 C# 的同学入手typeScript 会简单很多, 下面这里使用代码来表示和展现泛型的定义和使用 //泛型:在类 ...

  8. DBA面对新mysql环境

    来源:http://blog.csdn.net/wyzxg/article/details/8491152 author:skatetime:2013/01/10 DBA面对新MySQL环境感悟 1. ...

  9. mybatis的XML中注释需谨慎

    报错内容: java.sql.SQLException: Parameter index out of range (3 > number of parameters, which is 2) ...

  10. Graphviz install the Windows for Scyther

    1.在Pycharm 中使用Scyther工具的时候需要导入 graphviz 直接在 Interpreter 上安装的售后会报错,如果在 IDE上无法支架安装的库可以试图在控制台上安装,控制台上无法 ...