A basic RxJS guide for beginners. What do gold mines and RxJS operators have in common? (Part 2)
In case you missed it, I’ve included a link to the article below.
A basic RxJS guide for beginners. (Part 1)
Doesn’t RxJS feel a bit intimidating? That’s totally understandable. My eyes rolled a bit when I saw…
So what are RxJS Operators?
Operators are a HUGE key in making RxJS so useful. They allow us to decompose complex asynchronous code into pieces that are easier to write, read and understand.
A Pipeable Operator is an Operator that can be piped to an Observable. It is used to transform input data to a different output type.
In other words, it’s used to transform data as it flows through an Observable.
The Pipeable Operators reminds me of the gold mines in California where they had to refine the gold after mining it out of the ground or creek beds.
After finding the gold they would refine it to remove the other impurities that they didn’t want. Only after slaving like horses and sweating like pigs did they have real gold that they could sell for 💰 💰 💰.
Pipeable Operators don’t work like maniacs but they do follow similar steps.
Once you receive your data (gold) from your Observable (mine) you can pipe your data (refine your gold) before sending it to your Subscription (the gold buyer).
In the example below, we “pipe” data through a pipe function that multiplies every number by 10.
RxJS has many operators for us to choose from. Here’s just a few.
You can also build a chain of pipes. We can edit the example above and add a second pipe to filter the results.
It’s important to note that a Pipeable Operator returns a new Observable. This is a pure operation — the previous Observable is not modified.
Creation Operators do not “pipe” like Pipe Operators. Instead they “create” an Observable with a predefined behavior. Or it can be used to join other Observables.
In the example below we take a Creation Operator called an
interval and product an Observable.
There’s a multitude of Creation Operators that you can use. I’ve included a list below.
And that is a quick introduction to RxJS Operators.
End of Part 2
This is the end of the second article in a series about RxJS.
Don’t forget to pound that 👏 button. Thank-you!
And follow me on Medium to be notified of other helpful articles like this one.
Here’s a few more articles that might interest you.
How to add a spinner to an Angular Material button.
Err…wouldn’t it be nice if Angular Material had a button with a loading spinner?