Skip to content

RxJS Tutorials

veeramarni edited this page Dec 27, 2020 · 18 revisions

Video tutorials

https://www.youtube.com/playlist?list=PLj2oFNVaxfJ8nRFUA2CLyt8TymA0_vQux

Pay attention, when the pipe returns observables instead of values. In that case, we an flatten it using operator like below.

        action$
            .pipe(
                ofType('ACTION_TYPE'),
                map(action =>
                    // returns an observable
                ),
                concatAll(), // flattens the observable with higher order.  Otherwise it would return `observable` from the previous operator.
                tap(x => console.log(x)),
            );

This can be shorten using higher-order mapping operators. Such as concatMap, switchMap, mergeMap, exhaustMap

        action$
            .pipe(
                ofType('ACTION_TYPE'),
                concatMap(action =>               // does the same thing but it shorten the code.
                    // returns an observable
                ),
                tap(x => console.log(x)),
            );

Marble with explanation

http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-concatMap

https://scotch.io/tutorials/rxjs-operators-for-dummies-forkjoin-zip-combinelatest-withlatestfrom

Test cases

https://github.com/ReactiveX/rxjs/blob/master/spec/schedulers/TestScheduler-spec.ts

RxJS Epic Marble test

https://gist.github.com/evertbouw/94d4a9fdce93b34c31614a673acab73f

Contributing

Clone this wiki locally