The power of the observer pattern comes from the large variety of operators available. Operators are useful especially when we want to perform multiple actions on data streams that travels over time. It can be asynchronous data, user events, animation events, and so forth.
RxJS: A paradigm that helps us dealing with data streams over time.
The aim of this article is to describe what operators are, and why they are useful when dealing with data streams.
What we’ll address:
- What is an operator?
- Why do we need operators?
- How does operators work?
- Summary: When should we use operators?
1. What is an operator?
An operator is simply a function that performs a specific action. It takes a value, does something with it, and then returns it. We can do all kinds of operations; filter, modify, count, skip, retry, find or whatever the use case is.
In most cases we always need to perform multiple operations on a data set, and instead of creating these functions and have them scattered in our application, we have one and convenient style of implementing it. The following sections will describe this in more details.
2. Why do we need operators?
RxJS offers 120 operators and great documentation on reactive programming.
When starting with RxJS, you’ll notice a couple of familiar functions you’ve encounter in JavaScript like map(), filter(), and reduce(). Keep in mind the underlying code for these functions is different from the ones used in RxJS, but the concept is the same.
Here’s a visualization figure to emphasize what operators do.
As shown above, imagine the square is a value (or multiple values) passing from left to right inside a pipe. While the square is passing through the pipe, there are multiple checkpoints (operators) that performs specific actions on the square. One changes the color, the other one the shape, and so forth.
Here’s how it looks using RxJS.
Once we subscribe to the item observable the value 'Black Square' is then passed through the operators sequentially.
The
map()function is one of the most used functions in the JS ecosystem, and is also used a lot in RxJS.
3. How does operators work?
As mentioned it takes a value, does something with it, and then returns it. The value it returns can be an object, an array, a promise or whatever you pass.
The pipe() function is the hidden pillar behind RxJS’s popularity. It allows us to perform multiple operations on a data stream by grouping the operators in a declarative way like:
This helps developers to quickly understand what changes are being applied on a data stream by looking at what operators it consists.
Let’s pretend we want to get all users form the server using the pipe() function in RxJS.
Now instead of spending time on trying to figure out the aim of the code, we simply look at whats happening inside the pipe() function by reading from top to down. In short, we see that the we want only active users, above 18 years old, and get names only. This is a fairly short example to illustrate the concept of using the pipe() function with operators. However, in most cases this is what most developers do, building their own queries.
Summary
Here are a couple of questions to make your reactive journey easier.
When should we use operators?
It’s not required to use operators at all. But if you want to change the source data, for example let’s say you want a list of active users only, the first five items or the last ones, then operators is what you need.
How do you find the right operator?
Most operators have names that describe what it does. RxJS’s library has an API page that lists all operators. I would start there, and if you still can’t find what you are looking for, well, Google is your best friend. I would search for instance “RxJS operator take only some items”, and then the first link is most likely what you need which is the take() operator.
Do you need to master all operators?
The answer is no. In most cases, you only need to know 4–5 operators which solves most of the challenges. The rest you learn when you need it.
You can find me on Medium where I publish on a weekly basis. Or you can follow me on Twitter.
P.S. If you enjoyed this article and want more like these, please clap ❤ and share with friends that may need it, it’s good karma.
