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));
  • 相关阅读:
    缺陷笔记
    Eclipse中常用快捷键
    PL/SQL中复制粘贴表结构信息
    request之setAtrribute
    list+map
    套接字初始化失败问题
    上机编程题(2016校招)
    动态规划
    VS中碰到的问题
    IE8添加元素报错《没有权限》错误
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5260054.html
Copyright © 2011-2022 走看看