RxJS(part1)

Library for reactive programming using observables

It is very difficult to understand :/

But do not worry! I have your back!!!

Let us see a real life scenario

Suppose, we have a pizza shop, but we do not have any ingredients, client give the ingredients and we cook for them and return to them. We only support three ingredients like Cheeze, dough and sauce. Customer has bag of ingredients and give to shop and we cook and a person at the shop goes the client the pizza.

But what is going on inside the shop? How is the Pizza created?
There is an assembly line of chefs and each chef does their part and move it to next chef and so on.

Chef1: Open bag and take out all the ingredients and put it on the table. It passes it to chef2.

Chef2: Looks at the type of cheeze and checks if we can proceed with this cheeze or not? and then pass it on to the next chef Chef3

Chef3: cooks the cheeze and give to the chef4

chef4: cooks pizza and give it to the clerk.

Each of the chefs can reach out to the clerk at any point of time.

Every time a customer gives the bag, we will have a chain of events and we process it and then we get the pizza.

In RxJs we have Observable, which emits some sort of data and this data gets processed and we get the output Observables can emit multiple pieces of data.

Each operator(chef) changes the data in some sort and passed on to the another operator and so on. Each operator is operating on the data in some way. Assembly line of operators is called as pipe.

Once we are done, then we will return the data to the Observer.

Marble Diagram in RxJs

X axis is time and Y axis has operators and how they process the data.

//Observable

const {Observable} = require("rxjs")
const obs = new Observable((subscriber)=>{
    subscriber.next(10);
});

//Observer
const obs ={
    next: (value) => {
        console.log("Observer got value of " + value);
    },
    error: (err)=>{
        console.log("Observer got error of " + err);
    },
    complete: ()=>{
        console.log("Observer got complete notification ");
    };
}

We need to connect Observable to Observer

observable.subscribe(obs);

Output: Observer got a value of 10