zoukankan      html  css  js  c++  java
  • [RxJS] Groupby operator

    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(15000, 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))))
    );
  • 相关阅读:
    linux压缩与解压
    simple 单例
    模板字符串
    变量的解构赋值
    let和const关键字
    React的基本认识
    Docker安装Nginx
    jenkins创建工程
    Jenkins系统初始化配置
    在CentOS上使用Docker镜像安装Jenkins
  • 原文地址:https://www.cnblogs.com/Answer1215/p/11733946.html
Copyright © 2011-2022 走看看