RxJS #1 - Observables and observers

by rexonms

HTML

<script src="https://npmcdn.com/@reactivex/[email protected]/dist/global/Rx.umd.js"></script>
<button id='increase'>increase</button>
<button id='decrease'>decrease</button>
<div id="counter"></div>

JavaScript

console.clear()

// Observable Of
const source = Rx.Observable.of(1,2,3)
// Subscribe to stream of data
source.subscribe(x => console.log(x))


// Declarative Transformation
// Operate on Events
Rx.Observable.of(1,2,3)
.map(n => n * 2)
.subscribe(x => console.log(x))

// Lazy transformation
// Do only as much work as needed
Rx.Observable.range(1,100)
.map(n => n * 2)
.filter(n => n > 4)
.take(2) // Keeps track and exits once the take is done
.subscribe(x => console.log(x))

const decreaseBtn = document.getElementById('decrease')
const incrementBtn = document.getElementById('increase')
const counterEl = document.getElementById('counter')


// DOM Events
Rx.Observable.fromEvent(incrementBtn, 'click')
.mapTo(1)
.scan((acc, curr) => acc + curr, 0)
.subscribe(counter => {
  counterEl.innerHTML = counter;
})
 
const sr = Rx.Observable.merge(
	Rx.Observable.fromEvent(decreaseBtn, 'click').mapTo(-1),
	Rx.Observable.fromEvent(incrementBtn, 'click').mapTo(1)
)

sr.scan((acc, curr) => acc + curr, 0)
.subscribe(counter => {
	counterEl.innerHTML = counter;
})

// Async HTTP
const subscription = fetchOrder()
.mergeAll()
.filter(
	order => order.customerName === 'Tucker'
)
.map(order => order.id)
.subscribe(id => console.log(id))
subscription.unsubscribe()


// Built-in Ajax
function fetchOrder() {
	return Rx.Observable.ajax.get('/orders')
}






/* // Observables push values to their subscribers:
var obs = Rx.Observable.create(function(observer){
  observer.next('Hello');
  observer.next('World');
  setTimeout(function(){
    observer.next('Goodbye');
    if(Math.random()>0.5){
      observer.error(new Error("boo!"));
    } else {
      observer.complete();
    }
  }, 1000);
});

// Observers recibe values or errors from the Observable they are subscribed to:
obs.subscribe(
  function valueHandler(value){
    console.log(value);
  },
  function errorHandler(err){
    console.log(err);
  },
  function completeHandler(){
    console.log('Completed');
  }
);


 */