zoukankan      html  css  js  c++  java
  • [RxJS] Changing Behavior with MapTo

    You often need streams to trigger different behaviors on the data based on which streams triggers. This lessons shows how to use mapTo to pass functions into the scan operator and have completed control over you data.

    Current Code:

    const Observable = Rx.Observable;
    
    const startButton = document.querySelector('#start');
    const stopButton = document.querySelector('#stop');
    
    const start$ = Observable.fromEvent(startButton, 'click');
    const interval$ = Observable.interval(1000);
    const stop$ = Observable.fromEvent(stopButton, 'click');
    
    const intervalThatStops$ = interval$
        .takeUntil(stop$);
    
    const inc = (acc) => ({count: acc.count + 1}); // one line arrow function only ruturn object need ()
    
    const data = {count: 0};
    
    start$
        .switchMapTo(intervalThatStops$)
        .startWith(data)
        .scan( inc )
        .subscribe((x)=> console.log(x));

    Everytime the number 1,2,3... will be passed to the scan function. 

    If we want scan() method be fixable enought, we can use mapTo() method, which accecpts a function to increase the number. Then we need to modify the scan() function, now everytime it receive is the function return from mapTo, not a number anymore.

    start$
        .switchMapTo(intervalThatStops$)
        .mapTo( inc )
        .startWith(data)
        .scan( (acc, curr) => {
          console.log(curr); //(acc) => ({count: acc.count + 1})return curr(acc)
         } )
        .subscribe((x)=> console.log(x));

    Now we get full control over the scan() method, we can let it reset after 10:

    const Observable = Rx.Observable;
    
    const startButton = document.querySelector('#start');
    const stopButton = document.querySelector('#stop');
    
    const start$ = Observable.fromEvent(startButton, 'click');
    const interval$ = Observable.interval(200);
    const stop$ = Observable.fromEvent(stopButton, 'click');
    
    const intervalThatStops$ = interval$
        .takeUntil(stop$);
    
    const data = {count: 0};
    const inc = (acc) => { return Object.assign({}, data, {count: count + 1})};  // avoid modifying data object
    const resetAfterTen = (acc) => {
       if(acc.count == 10){
          return data;
       }else{
         return Object.assign({}, acc, {count: acc.count + 1})
       }
    }
    
    
    
    start$
        .switchMapTo(intervalThatStops$)
        .mapTo( resetAfterTen )
        .startWith(data)
        .scan( (acc, curr) => {
           return curr(acc)
         } )
        .subscribe((x)=> console.log(x));
  • 相关阅读:
    前端程序员应该知道的 15 个 jQuery 小技巧
    UML 序列图详解
    UML实践详细经典教程----用例图、顺序图、状态图、类图、包图、协作图
    浅谈UML的概念和模型之UML九种图
    [TFS教程]TFS: Get Command
    cmd下PUSHD和POPD命令使用说明
    IIS 7.0的集成模式和经典模式
    sql日期格式化
    VS2010自定义添加创建者、创建时间等个人信息新建文件模版
    瞎打一波
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5260054.html
Copyright © 2011-2022 走看看