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))))
    );
  • 相关阅读:
    3、Ubantu下安装nginx
    2、关于mongodb外部访问不成功的问题
    1. libcurl.so.4: cannot open shared object file: No such file or directory
    Php 笔记
    Jade之Plain Text
    Jade之Mixins
    Jade之Interpolation
    Jade之Template Inheritance
    Jade之Includes
    Jade之Filters
  • 原文地址:https://www.cnblogs.com/Answer1215/p/11733946.html
Copyright © 2011-2022 走看看