zoukankan      html  css  js  c++  java
  • [RxJS] Sharing Streams with Share

    A stream will run with each new subscription added to it. This lesson shows the benefits of using share so that the same stream can be shared across multiple subscriptions.

    const timer$ = starters$
        .switchMap(intervalActions)
        .startWith(data)
        .scan((acc, curr)=> curr(acc))
    
    
    timer$
        .do((x)=> console.log(x))
        .takeWhile((data)=> data.count <= 3)
        .withLatestFrom(
            input$.do((x)=> console.log(x)),
            (timer, input)=> ({count: timer.count, text: input})
        )
        .filter((data)=> data.count === parseInt(data.text))
        .reduce((acc, curr)=> acc + 1, 0)
        .repeat()
        .subscribe(
            (x)=> document.querySelector('#score').innerHTML = `
                ${x}
            `,
            err=> console.log(err),
            ()=> console.log('complete')
        );

    Current code has a problem every time we type in the input, we need to click delete keyborad to delete the input. This is not conveninet. 

    So what we want is every time when the code check whether the value match, then we clean the input:

    const runningGame$ = timer$
        .do((x)=> console.log(x))
        .takeWhile((data)=> data.count <= 3)
        .withLatestFrom(
            input$.do((x)=> console.log(x)),
            (timer, input)=> ({count: timer.count, text: input})
        );
    
    runningGame$
      .subscribe( (x) => input.value = "");
    
     runningGame$
        .filter((data)=> data.count === parseInt(data.text))
        .reduce((acc, curr)=> acc + 1, 0)
        .repeat()
        .subscribe(
            (x)=> document.querySelector('#score').innerHTML = `
                ${x}
            `,
            err=> console.log(err),
            ()=> console.log('complete')
        );

    So we split the code and add another subscribe to clean the input, but now the problem is everytime it console log twice. This is because we have two subscribe on the runningGame$. 

    TO solve this problem, we need to share() the stream:

    const runnintGame$ = timer$
        .do((x)=> console.log(x))
        .takeWhile((data)=> data.count <= 3)
        .withLatestFrom(
            input$.do((x)=> console.log(x)),
            (timer, input)=> ({count: timer.count, text: input})
        )
    .share();

    Now it only log out once, but it doesn't clean the input when we click start again. THis is because we only repeat() this part of code:

     runningGame$
        .filter((data)=> data.count === parseInt(data.text))
        .reduce((acc, curr)=> acc + 1, 0)
        .repeat()

    What we need to do is also make runningGame$ (clean the input) stream repeat itself:

    // To clean the input
    runningGame$
      .repeat()
      .subscribe( (x) => input.value = "");

    ----------------------------

    Code:

    const timer$ = starters$
        .switchMap(intervalActions)
        .startWith(data)
        .scan((acc, curr)=> curr(acc))
    
    
    const runningGame$ = timer$
        .do((x)=> console.log(x))
        .takeWhile((data)=> data.count <= 3)
        .withLatestFrom(
            input$.do((x)=> console.log(x)),
            (timer, input)=> ({count: timer.count, text: input})
        )
    .share();
    
    // To clean the input
    runningGame$
      .repeat()
      .subscribe( (x) => input.value = "");
    
     runningGame$
        .filter((data)=> data.count === parseInt(data.text))
        .reduce((acc, curr)=> acc + 1, 0)
        .repeat()
        .subscribe(
            (x)=> document.querySelector('#score').innerHTML = `
                ${x}
            `,
            err=> console.log(err),
            ()=> console.log('complete')
        );
  • 相关阅读:
    bzoj 3262: 陌上花开
    hdu 5618 Jam's problem again
    bzoj 1176: [Balkan2007]Mokia
    bzoj 2683: 简单题
    Codevs 1080 线段树练习(CDQ分治)
    bzoj 3223: Tyvj 1729 文艺平衡树
    bzoj 1503: [NOI2004]郁闷的出纳员
    bzoj 1208: [HNOI2004]宠物收养所
    bzoj 1588: [HNOI2002]营业额统计
    bzoj 3224: Tyvj 1728 普通平衡树
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5274425.html
Copyright © 2011-2022 走看看