In this blog, we will learn about some basics of RxJS and its components like Observables, Observers and Operators. So, first of all, what is RxJS?
callback- basedcode (RxJS Docs).
In the above definition of RxJS, you have encountered the
What Is Reactive Programming?
Reactive programming is a
declarative programming paradigm concerned with the data streams and the propagations of change.
A programming paradigm is a style or way of programming.
Few common programming paradigms includes:
Control flow in imperative programming is explicit. Commands show how the computation takes place, step by step. Each step affects the global state of the computation.
Control flow in declarative programming is implicit. The programmer states only what the result should look like, not how to obtain it.
As RxJS is a declarative programming language, so for better understanding of this, let’s take a look at below example. I am going to show an example, how below code works in imperative and declarative programming both.
For example: In imperative programming,
a = b +c would mean that a is being assigned the result of
b + c in the instant the expression is evaluated, and later, the values of b and c can be changed with no effect on the value of a.
On the other hand in reactive programming, which is declarative, the value of a is automatically updated whenever the value of b
a = b + c to determine the presently assigned value of a.
So, RxJS is an incredible tool for reactive programming, and today we are going to dive a little deeper into what observables, observers and operators are.
What is an Observable?
An observable is just a function, which packs the data that can be passed around from one thread to another thread. They are created to emit the data synchronously or asynchronously based on their configuration. They are like the supplier of data to their consumer.
Angular use lot of observables in different scenarios. These includes:
- To make AJAX request and response,Angular
HTTPmodule uses observables.
- Observables are used in
Form Modulesto listen for and responds to user-inputs events.
EventEmitterclass extends Observable.
To better understand Observables, let’s create a sample code.
Here, in the above example, we have created our custom observable and subscribe it using the three input values, and the result should be the sum of all values passed to it.
What is an Observer?
In simple term, observers are the consumer of the data, which is emitted by observables as a producer. To consume data, observers subscribe to the observables using its
subscribe() method. So, whenever observables emit data, all the registered observers received the data in
An observer is an object that defines callback methods to handle three types of notifications that an observable can send. These callback methods are:
next()method is used for logic processing and computation. It is required.
error()method is used to capture any error. It is optional.
complete()is used in the last when the process is completed. It is optional.
We have subscribed our observable
What is an Operator?
RxJS provides us numerous operators like
() etc. to perform complex manipulation of the collection on the source observables. Operators are just like functions, which takes configuration
Few of the RxJS operators are:
- and switchMa()
Let’s take a small example of operators.
pipe() operator, you can combine multiple operators. For example:
1, 2, 3, 4, 5,6
In this blog, we read about observables, observers and operators used in