In last series, we discussed about What is Observable in Observable,
Click here for — RXJS 03: What is Observer in Observable
In Today’s series, we will see Operators and their types.
Operators are the essential pieces that allow complex asynchronous code to be easily composed in a declarative manner.
To put it in simple terms, imagine the water is streaming from a river 😶🌫️. Just like the image shown here,
Checkout Live demo of the code in Stackblitz here:
https://stackblitz.com/edit/rxjs-series-operatortypes
Now imagine this is observable that gives data, just like how water is streaming. Now We need to get the water in different format, like your scenario might be doubling the water, shortening the water, filtering the fish from water.
In order to transform the data stream we use Operators, Operators convert the value and return a new observable.
There are two essential types of Operators
- Creation Operators
- Pipeable Operators
Creation Operators
Creation Operators are the operator, which can be called standalone functions to create a new Observable.
Let’s understand Creation operator with code example,
Normally to create an observable we declare new Observable and assign it to a variable, In the same manner, to create an observable we can use a creation operator like ie: of, fromEvent, etc.
In the above code snippet, I used “of” operator. “of” operator converts any value to observable.
In console, we get to see
We can see that whatever the observable we wrote in many lines, we just created using “of” operator.
Pipable Operators
Pipable operators are used to transforming the data from the observable. When called, they do not change the existing Observable instance. Instead, they return a new Observable.
Continue imagining water and fishnet, pipe operator transforms the data, like if we provide 100, 200, 300 as a data stream, it has a ability to convert it to filtering, doubling, etc.
Let’s understand with an example.
Refertom line number 28, in the below code snippet. Pipable operator used with pipe() and pipe transforms. Inside the pipe operator, we can use the operator that we desired just like. Observable.pipe(map(), filter())
In the example I used map operator to double the value, map operator works like javascript map. It takes two arguements first is data, any name we can give and the second is logic. I have gave the logic as date multiply by 2.
In console we can see the output of the transformed value.
Congratulation to making it till here, in the comming series we will see more about the operator. Give a clap for, it motivates me to make more blogs, claps are free you can give 10 or 50 even 100..
— — — — — — — — — — — — — — END OF BLOG — — — — — — — — — — — — — — -
Here is the link for all rxjs series blog,
https://medium.com/@yuvayuvaraj720444/rxjs-series-596ce73fa5e6
