No content

RXJS: Observables 101 By Maina Wycliffe www.mainawycliffe.dev

ReactiveX JavaScript (RXJS) ● RXJS is a JavaScript Implementation of ReactiveX Library ● ReactiveX is a library for composing async events using the observer pattern ● ReactiveX is a combination of the best ideas from the Observer pattern, the Iterator pattern, and functional programming ● The observer pattern is a software design pattern where a subject maintains a list of listeners (observers) and notifies them of any changes. ● ReactiveX is not specific to JavaScript and there are implementation for other languages such as RxJava, RxDart, RxPHP, RxGo, etc.

RXJS Concepts ● Observable – future values/events ● Observer – listener to observable ● Subscription – execution of observable ● Operators – pure function for transforming streams ● Subject – Allow multiple observers ● Schedulers – control concurrency, enable coordination

Why use Observables ● Use of Pure Functions ● Control the flow of streams/data/events ● Transform Values ● Support for Multiple Languages

Example Listening to a Button Click Event

Operators They are pure functions Allow easy composition in declarative approach Key to RXJS Kinds of Operators ● Pipeable Operators ● Creation Operators

Pipeable Operators A Pipeable Operator is a function that takes an Observable as its input and returns another Observable. It is a pure operation: the previous Observable stays unmodified.

Examples of Pipeable Operators ● takeLast ● takeUntil ● takeWhile ● map ● mapTo ● mergeMap ● mergeMapTo ● tap ● catchError ● retry ● retryWhen ● combineLatest ● concat ● forkJoin ● merge ● race ● zip

Creation Operators This is a function that creates a new Observable with some common predefined behaviour or by joining other Observables.

Creation Operators Example 2: Interval Operator

Examples of Creation Operators ● ajax ● bindCallback ● bindNodeCallback ● defer ● empty ● from ● fromEvent ● fromEventPattern ● generate ● interval ● of ● range ● throwError ● timer ● iif

Subjects ● A Subject is like an Observable but can multicast to many Observers. ● They maintain a registry of many listeners. ● Every Subject is an Observable ● Observer can not distinguish between an Observable and a Subject ● Unlike Observables, subscribe doesn’t invoke execution, it simply registers the observer

Subjects ● Unlike an Observable, a subject has the following methods • next(v) – feed new value to the subject • error(e) – feed an error value to the subject • complete() – Close the subject

Example of a Subject

There are 3 variants of Subjects: • BehaviorSubject • ReplaySubject • AsyncSubject Types of Subjects

BehaviorSubject ● Stores the last value emitted to its consumers as the current value ● Emits the current value in store whenever a new observer subscribes ● Must be initialized by a value ● Example personal age or total vote count.

ReplaySubject ● Records multiple values from an observable execution ● Replays all those values to new subscribers ● The number of values recorded is specified during creating ● Records all values if none is specified

AsyncSubject ● Only the last value of the Observable execution is sent to the observables ● Only sent when the execution completes

bit.ly/2qqalg7 BehaviorSubject vs ReplaySubject

● http://reactivex.io/intro.html ● https://rxjs-dev.firebaseapp.com/guide/overview ● https://bit.ly/2qqalg7 ● https://www.learnrxjs.io/ Additional Resources

No content