RxJS Flashcards
What is RxJS?
It is a JavaScript library that uses observables to work with reactive programming that deals with asynchronous data calls, callbacks and event-based programs. RxJS can be used with other JavaScript libraries and frameworks. It is supported by JavaScript and also with typescript.
The essential concepts in RxJS which solve async event management are:
- Observable: represents the idea of an invokable collection of future values or events.
- Observer: is a collection of callbacks that knows how to listen to values delivered by the Observable.
- Subscription: represents the execution of an Observable, is primarily useful for cancelling the execution.
- Operators: are pure functions that enable a functional programming style of dealing with collections with operations like map, filter, concat, reduce, etc.
- Subject: is equivalent to an EventEmitter, and the only way of multicasting a value or event to multiple Observers.
- Schedulers: are centralized dispatchers to control concurrency, allowing us to coordinate when computation happens on e.g. setTimeout or requestAnimationFrame or others.
3 elements of RxJS
core type: Observable +
satelite types:
Observer, Schedulers, Subjects +
operators inspired by Array#
Observable
An observable is a function that creates an observer and attaches it to the source where values are expected, for example, clicks, mouse events from a dom element or an Http request, etc.
Observer
It is an object with next(), error() and complete() methods, that will get called when there is interaction to the with the observable i.e. the source interacts for an example button click, Http request, etc.
Subscription
When the observable is created, to execute the observable we need to subscribe to it. It can also be used to cancel the execution.
Operators
An operator is a pure function that takes in observable as input and the output is also an observable.
Subject
A subject is an observable that can multicast i.e. talk to many observers. Consider a button with an event listener, the function attached to the event using addlistener is called every time the user clicks on the button similar functionality goes for subject too.
Schedulers
A scheduler controls the execution of when the subscription has to start and notified.
What is the difference between Promises and Observables?
Promise
A Promise handles a single event when an async operation completes or fails.
An Observable is like a Stream (in many languages) and allows you to pass zero or more events where the callback is called for each event.
Often Observable is preferred over Promise because it provides the features of Promise and more. With Observable it doesn’t matter if you want to handle 0, 1, or multiple events. You can utilize the same API in each case.
Observable also has the advantage over Promise to be cancellable. If the result of an HTTP request to a server or some other expensive async operation isn’t needed anymore, the Subscription of an Observable allows you to cancel the subscription, while a Promise will eventually call the success or failed callback even when you don’t need the notification or the result it provides anymore.
Observable
An observable is a function that creates an observer and attaches it to the source where values are expected from, for example, clicks, mouse events from a dom element or an Http request, etc.
Observer is an object with callback functions, that will get called when there is interaction to the Observable, i.e., the source has interacted for an example button click, Http request, etc.
Execute Observable
next() − This method will send values like a number, string, object etc.
complete() − This method will not send any value and indicates the observable as completed.
error() − This method will send the error if any.
Working with Operators
To work with operators we need a pipe() method.
obs.pipe(
operator1(),
operator2(),
operator3(),
operator3(),
)
Characteristics of Promises:
Single Value: Promises represent a single value that will be resolved or rejected.
Immutable State: Once a Promise is resolved or rejected, its state cannot be changed.
Error Handling: Promises have built-in error handling through .catch() or try…catch blocks.
Promises features
Handles single value.
Suitable for asynchronous communication
Cannot be canceled once initiated.
he catch() method is used for handling errors.
