A basic RxJS guide for beginners. What do gold mines and RxJS operators have in common? (Part 2)

Image for post
Image for post
Gold pipes — Photo by Victor Garcia on Unsplash

In the first article we covered two basic concepts — the Observable and the Subscription.

In case you missed it, I’ve included a link to the article below.

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.

A basic RxJS pipe example — 7 lines of code.

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.

An RxJS Pipeable operator example with multiple pipes.

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.

Creation Operators

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.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store