RXJS- Part 1

RXJS stands for Reactive Extension for Javascript, which is used to work with asynchronous data streams and Observable. Data Stream basically means data that is continuously generated by different sources.

Data Stream can be created from many things like UI events, HTTP request, Memory/Cache etc.

Stream basically means A sequence of ongoing events ordered in time, which emits a value, an error and a complete signal

From Rxjs 5+ the github location of Rxjs is https://github.com/ReactiveX/rxjs

Here I will discuss Rxjs based on Angular application

Previously we face a confusion that from where should we import things from Rxjs, like when we import Observable then we face the problem of path, like should we import it from "rxjs" or "rxjs/observable". But these problem has been fixed in the latest Rxjs(5+)

Basically we use two main resource of Rxjs, they are

1) Creation method :- Methods which are used to create an Observables (e.g Subject, from,of, range, interval etc).

Now we import these from only "rxjs"

import { range } from 'rxjs';

2) Operators :- Method which are used to modify the data from the stream in an Observables (e.g map,filter,take,scan etc)

We import operators from "rxjs/operators"

import { map, filter, scan } from 'rxjs/operators';

A brief overview of RXJS

Let's take a simple example. In the above picture we can see a common thing which we all encounter in our daily life. But lets name those things based on software teminilogy

Let the petrol jar be the "API" which is emitting data based on some request, or based on some corn-service or may be due to some other action.

The drop of petrol represent the "Data stream" which are produced at different interval of time

The top of the funnel is Observable which is allowing all the Data stream to flow through it

The middle portion is the Pipe, which will filter the data based on our requirement

And the bottom of the funnel is the "Observer" which will receive the data

Basically all the operators inside pipe will be in effect when we will subscribe it, until then it will not be activated

Let's take a simple example, where we will take number in some interval (will take upto 4 number) and then multiply the number with two

import { interval } from 'rxjs';
import { take,map } from 'rxjs/operators';
 
const numbers = interval(1000);
 
const takeFourNumbers = numbers.pipe(
  take(4),
  map(x => x*2)
);


takeFourNumbers.subscribe((data) => {
   console.log(data);   //0,2,4,6
  

})

Here as we discussed interval is an Creation method which will create a Observable hence imported from "rxjs" and take and map are operators.

We are creating a data stream of ascending numbers, one every second (1000ms)

const numbers = interval(1000);

Then as we know we must apply pipe to include the operators hence we are applying two operators, take(4) which will take only 4 values (0,1,2,3) and the map() which will convert the value (here doubling the value)

Since the operators will not work until and unless we apply subscribe() to it.

takeFourNumbers.subscribe((data) => {
    console.log(data)
  

})

Hope the article has helped you to gain some knowledge on RXJS. I will try to post an article on the next part. Please let me know is this helpful or not or if there is any way it can be improved it.