RxJS push principle
- Observer pattern
-
Iterator pattern
- Functional programming
RxJS - based on
RxJS - observables work like iterators
import { interval } from 'rxjs';
const observable = interval(1000);
observable.subscribe( x=> console.log(x) );
Observer
every next(x) value
from Iterator
calls
console.log(x);
RxJS - observables work like iterators
import { interval } from 'rxjs';
import { take } from 'rxjs/operators';
const observable = interval ( 1000 ) .pipe ( take ( 4 ) );
const observer = {
next: x => console.log ( x ),
error: err => console.error ( err ),
complete: ( ) => console.log ( 'done' )
};
Observer
observable.subscribe( observer );
//output: 0, 1, 2, 3, done
RxJS - observable VS iterator
while( iterator.hasNext( ) ) {
Iterator
Observable.create( (observer) =>{
});
Observable
let value = iterator.next( ) ;
console.log( value ) ;
}
observer.next("value1");
observer.complete();
observer.next("value2");
RxJS - Observable is a PUSH system
RxJS - Pull VS Push
Consumer
Pull
Producer
giveMeData();
return data;
giveMeData();
return data;
RxJS - Pull VS Push
Consumer
Push
Producer
subscribe();
sendSomeData();
sendSomeData();
sendSomeData();
RxJS - Observable is a PUSH system
import { interval } from 'rxjs';
const observable = interval ( 1000 ) ;
observable.subscribe( x => console.log( x ) );
RxJS - Observable is a PUSH system
import { Observable } from 'rxjs';
my custom interval observable
const observable = my5Interval ( 1000 ) ;
observable.subscribe( x => console.log( x ) );
//output: 0, 1, 2, 3, 4, 5
function my5Interval(ms){
}
return Observable.create( (observer) => {
});
let count = 0;
const id = setInterval( ( )=>{
}, ms);
observer.next(count);
count++;
Observable
uses
observer.next
to push data stream
if(count >=5 ){
clearInterval( id );
observer.complete();
}
Observable
pushes end
of data with
observer.complete
- Observer pattern
-
Iterator pattern
- Functional programming
RxJS - based on
RxJS - main actors
- Observable
-
Operators
- Observer
- Subscription
- Subject
RxJS push principle
By Enrique Oriol
RxJS push principle
- 52