RxJS Introductions - The first steps
IntroductionThis is a essential part of Reactive programming.
An observable represents a stream, or source of data that can arrive over time.
The most common use case in RxJS is from events. This can be anything from mouse moves, button clicks, input into a text field, or even route changes.
Observables are cold, or do not activate a producer until there is a Subscription.
To create a subscription, you call the subscribe method, supplying a function (or object) - also known as an observer.
fromEvent button document myObservable button subscription myObservable console event
.subscribe() function is used to subscribe to the observable. This function will set up an event listener, call the function (passed inside subscriber function) whenever the event happens and returns the subscription object with an unsubscribe object.
Unsubscribe contains the clean up logic like remove the appropriate event listener.
Each subscribe() will create a new executable context.
Subscribe function takes object of next, error and complete functions. Next function is invoked when successful emission occurs from the observable.
subscription myObservable console event console error console
Subscription in this scenario is called Unicasting i.e. it creates a one direction flow where observable emits to the subscriber. (Think for an example a Face to Face interview with one person)
OperatorsOperators offer a way to manipulate values from a source, returning an observable of the transformed values.
Let's talk about the Pipe function.
The pipe function is the assembly line from your observable data source through your operators.
Imagine the pipe function as a chain of operators where you can manipulate, filter, and transform the data to fit your use case.
inputValue typeaheadApi term
You must know that these operators are divided into categories that suits the needs. These categories are:
- Creation Operators
These operators allows creation of an observable from nearly anything.
Example: suppose we are creating a progress bar as a user scrolls through an article. We could turn the scroll event into a stream by utilizing the
The most commonly used creation operators are
- Combination Operators
The combination operators allow the joining of information from multiple observables.
The most commonly used combination operators are
- Error Handling OperatorsThe error handling operators provide effective ways to gracefully handle errors and perform retries, should they occur.
For example, we can use
catchErrorto safeguard against failed network requests.The most commonly used error handling operators is
- Filtering Operators
The filtering operators provide techniques for accepting - or declining - values from an observable source and dealing with backpressure, or the build up of values within a stream.
The most commonly used filtering operators are
- Multicasting Operators
In RxJS observables are unicasting by default. These operators can make an observable hot, or multicast, allowing side-effects to be shared among multiple subscribers.
The most commonly used multicasting operator is
- Transformational Operators
These operators provide transformation techniques for nearly any use-case you will encounter.
The most commonly used transformation operators are
At this stage, these categories can look quite scary. Don't worry you all, it will soon click once you keep coding with this library.
While operators can be grouped into common categories, operators within a category often share common behavior. By recognizing this common behavior you can start creating a 'choose your own operator' tree in your mind.