Skip to content

RxJS Tutorials

veeramarni edited this page Jun 15, 2021 · 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 can flatten it using operator like below.

        action$
            .pipe(
                ofType('ACTION_TYPE'),
                map(action =>
                    serviceAction(action) // For example, if it returns a stream of observables
                ),
                tap(x => console.log(x)), // it will be a stream of observables
                concatAll(), // flattens the observable with higher order observable.  Otherwise it would return `observable` from the previous operator.
                tap(x => console.log(x)), // it will be stream of values
            );

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.
                    serviceAction(action) // returns stream of observables
                ),
                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

https://dev.to/aturingmachine/testing-rxjs-with-marbles-3112

Test cases

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

RxJS Epic Marble test

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