plastikaweb
12/5/2016 - 8:58 PM

JS Bin// source https://jsbin.com/jewezex RxJS - multiple streams with Merge

JS Bin// source https://jsbin.com/jewezex RxJS - multiple streams with Merge

index.html
content_copyfile_download

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://unpkg.com/@reactivex/rxjs@5.0.0-beta.7/dist/global/Rx.umd.js"></script>
</head>
<body>
  <button id="start">Start</button>
  <button id="stop">Stop</button>
  <button id="reset">Reset</button>
<script id="jsbin-javascript">
'use strict';

var startB = document.querySelector('#start');
var stopB = document.querySelector('#stop');
var resetB = document.querySelector('#reset');

var start$ = Rx.Observable.fromEvent(startB, 'click');
var stop$ = Rx.Observable.fromEvent(stopB, 'click');
var reset$ = Rx.Observable.fromEvent(resetB, 'click');

var interval$ = Rx.Observable.interval(1000);

var data = { count: 0 };
var inc = function inc(acc) {
    return { count: acc.count + 1 };
};
var reset = function reset(acc) {
    return data;
};

var intervalThatStops$ = interval$.takeUntil(stop$);

var incOrReset$ = Rx.Observable.merge(intervalThatStops$.mapTo(inc), reset$.mapTo(reset));

start$.switchMapTo(incOrReset$).startWith(data).scan(function (acc, curr) {
    return curr(acc);
}).subscribe(function (x) {
    return console.log(x);
});
</script>



<script id="jsbin-source-javascript" type="text/javascript">const startB = document.querySelector('#start');
const stopB = document.querySelector('#stop');
const resetB = document.querySelector('#reset');

const start$ = Rx.Observable.fromEvent(startB, 'click');
const stop$ = Rx.Observable.fromEvent(stopB, 'click');
const reset$ = Rx.Observable.fromEvent(resetB, 'click');

const interval$ = Rx.Observable.interval(1000);

const data = { count: 0 };
const inc = (acc) => ({count: acc.count + 1});
const reset = (acc) => (data);

const intervalThatStops$ = interval$
    .takeUntil(stop$);

const incOrReset$ = Rx.Observable.merge(
    intervalThatStops$.mapTo(inc),
    reset$.mapTo(reset)
  );

start$
  .switchMapTo(incOrReset$)
  .startWith(data)
  .scan((acc, curr) => curr(acc))
  .subscribe((x) => console.log(x));
</script></body>
</html>
jsbin.jewezex.js
content_copyfile_download
'use strict';

var startB = document.querySelector('#start');
var stopB = document.querySelector('#stop');
var resetB = document.querySelector('#reset');

var start$ = Rx.Observable.fromEvent(startB, 'click');
var stop$ = Rx.Observable.fromEvent(stopB, 'click');
var reset$ = Rx.Observable.fromEvent(resetB, 'click');

var interval$ = Rx.Observable.interval(1000);

var data = { count: 0 };
var inc = function inc(acc) {
    return { count: acc.count + 1 };
};
var reset = function reset(acc) {
    return data;
};

var intervalThatStops$ = interval$.takeUntil(stop$);

var incOrReset$ = Rx.Observable.merge(intervalThatStops$.mapTo(inc), reset$.mapTo(reset));

start$.switchMapTo(incOrReset$).startWith(data).scan(function (acc, curr) {
    return curr(acc);
}).subscribe(function (x) {
    return console.log(x);
});