RxJS — 7 Useful Operators You Might Not Know

The RxJS library has a lot of operators that can make our lives much easier. Here are seven operators that are not getting the attention they deserve.

EMPTY

Just emits ‘complete’, and nothing else.

EMPTY immediately emits complete and does not emit any value.

RxJS complete example

Here’s a useful example

Here we have a service that fetches the user for us (UserSevice).
If we are getting errors through the process we don’t want the logic inside subscribe to happen. So we can use EMPTY for it to complete immediately after the error.

catchError and return EMPTY

Here is a simplified example

defer

Creates the Observable lazily, that is, only when it is subscribed.

In simple words, defer lets you perform code when subscribe is called. This is what defer is all about. What helps me remember it is that defer is similar to the word different - different execution every time subscribe happens.

Let’s say we want a random number in each new subscription. With defer it’s possible!

defer example RxJS

For comparison, if we use of instead, we will get the same number every time.

defaultIfEmpty

If the source Observable turns out to be empty, then this operator will emit a default value.

In other words, when our Observable emits complete only, without any value emitted before that, defaultIfEmpty will emit the value inserted to it instead.

generate

Generates an Observable by running a state-driven loop that emits an element on each iteration

RxJS generate example

generate is like a for loop and this is what the arguments represent:
1. initialState: 2
2. condition: x ≤ 20
3. iterate: x + 3
4. resultSelector: ‘#’.repeat(x)
The first 3 are very simple, and the last one just says, when you get your value from the loop, how do you want to show it?
In the example above we choose to make it a sequence of ‘#’ with repeat.

Note: from v8 and above you should transfer the parameters as an object.

generate rxjs example v8+

withLatestFrom

Whenever the source Observable emits a value, it computes a formula using that value plus the latest values from other input Observables, then emits the output of that formula.

In simple words, withLatestFrom takes the latest value emitted by the Observable you insert into it, but just when your source Observable emits a value.

Here’s a useful example

Let’s say that you have a neat HTTP server that generates funny names😆 and when you get the response from it, you want to add it to the username you already have in your state.

withLatestForm example RxJS

For simplicity here’s the same example without store and external functions.

simplified withLatestForm example RxJS

pluck

Maps each source value to its specified nested property.

pluck example RxJS

In simple words, it’s just like using map to map a value to one of its members but saves the boilerplate of writing it.

finalize

Call a function when Observable completes or errors

finalize example RxJS

In other words, finalize will emit once when your stream is completed or an error has occurred.

Here’s a useful example

Let’s take the previous example with EMPTY and escalate it,
while getting the user from the server we want to show loading on the screen.
We also want the loading to disappear when the user is fetched but also when there is an error - here it's very useful to use finalize.

finalize and EMPTY together example RxJS

Hope you enjoyed this article and learned some new Operators 😊
If you liked this please leave me a clap 👏 so I’ll know to write more things like it. Feel free to reach out to me with any questions via my website: https://roee.dev.