2017-07-25 37 views
1

私はRxJSを学習しようとしていますが、私は単純で直接的な例であると考えていました。ある間隔で生成された乱数のオブザーバブルを作成し、そのオブザーバブルに基づいて他の2つのオブザーバブルを使用して、見られた最小値と最大値を追跡します。RxJS:同じルートを使用していない観測可能な観測値観測可能な値

rngStreamが正常に動作しているようですが、minStreamとmaxStreamの両方が正しくトラッキングされているようです。私が抱えている問題は、これが実行されると、rngStream、minStream、およびmaxStreamのように、それぞれの間隔で異なる乱数を持つように見えるということです。私はそれが期待されているかどうか、あるいは私が間違って何かを設定したかどうかを理解しようとしています。私の目標は、のような出力なものになるだろう

[27, 27, 27] 
[13, 13, 27] 
[90, 13, 90] 
[42, 13, 90] 
... 

let rngStream = Rx.Observable 
 
    .interval(1000) 
 
    .map(() => Math.ceil(Math.random()*100)) 
 
    .take(5); 
 

 
// Track the lowest number we've seen. 
 
let minStream = rngStream 
 
    .startWith(100) 
 
    .scan((x, y) => Math.min(x, y)) 
 

 
// Track the highest number we've seen. 
 
let maxStream = rngStream 
 
    .startWith(0) 
 
    .scan((x, y) => Math.max(x, y)) 
 

 
Rx.Observable.zip(rngStream, minStream, maxStream) 
 
    .subscribe(console.log);
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.4.2/Rx.min.js"></script>

答えて

2

https://www.youtube.com/watch?v=3LKMwkuK0ZE

このビデオでは、実際に私のためにたくさんのことを明らかにしました。具体的には、32:00のマークで、彼は.shareを参照して、観察可能なマルチキャストを行います。デフォルトでは、すべてのサブスクライバは独自のコピーを取得します。だから、この修正は、次のようになります。

let rngStream = Rx.Observable 
 
    .interval(1000) 
 
    .map(() => Math.ceil(Math.random()*100)) 
 
    .take(5) 
 
    .share(); 
 

 
// Track the lowest number we've seen. 
 
let minStream = rngStream 
 
    .startWith(100) 
 
    .scan((x, y) => Math.min(x, y)) 
 

 
// Track the highest number we've seen. 
 
let maxStream = rngStream 
 
    .startWith(0) 
 
    .scan((x, y) => Math.max(x, y)) 
 

 
Rx.Observable.zip(rngStream, minStream, maxStream) 
 
    .subscribe(console.log);
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.4.2/Rx.min.js"></script>

関連する問題