RxJS: Filter explained

Publicado por Tomasz Smykowski en

RxJS stands for Reactive Extensions for JavaScript. It is a great library to handle flow of items received by your application. Today you will learn what is one of the most commonly used RxJS operator: filter.

The documentation offers a nice diagram with circles that is self-explanatory:

But what does it really mean? Let's forget about the diagram for a moment.

The analogy

Imagine you are recruiting an army of palladins. But you know your enemy sent also some spies that try to act as ones to join your forces and give away valuable information. Therefore you ask every recruit if he is able to prepare a poison. Since palladins are forbidden from lie and prepare poisons, they will say so. Spies will try to impress you and say they do. That way you will allow only proper palladins to join your army.

This is how RxJS filter works. It looks like this:

Balls represent items coming to a filter operator. Filter operator checks if an item satisfies a logical condition by checking if it is blue. Blue balls go to the output. Other ones are kicked out.

How to translate this analogy to programming? Why an app should ignore annoyingly frequent events, and only process the last event that happened before silence?

The example

RxJS filter is useful when you want to filter out items. You can do it of course also in your subscription method, where you handle incoming items. However, using filter operator is great, because items you are not interested in, won't have to be handled by the subscription method. Use it when you want to rule out wrong items as early as possible.

Let's say there is a storage room in a warehouse where temperature sensitive food is stored. It is equipped with a sensor sending temperature reading each hour. You'd like to notify user every time temperature goes above 20 degree.

The logic you want to introduce looks like this:

When a new temperature reading arrives:

- filter temperatures above 20 degree

- notify user every time such reading appers

The formal way to write it down with RxJS like this:

sensorReadings
   .pipe(
      filter(
         (reading) => reading.temperature > 20
      )
   )
   .subscribe(
      reading => sendHighTemperatureNotification(reading)
   );

As you can see it is pretty complex syntax. It is because RxJS offers more operators than filter and ways to combine them. You can think of pipe section as a decision-making how to handle incoming events, and subscribe what to do with events that pipe returns.

There are other operators you can use in the pipe section. However, there are one interesting thing about filter I want to share with you before this article finishes.

Interesting facts

You can also use an additional, optional parameter called index. It is the index of an item from the moment you have subscribed, starting with 0.

Also check out:

Part 1: RxJS throttle
Part 2: RxJS debounce

 

 

0 comentarios

Dejar un comentario

Por favor tenga en cuenta que los comentarios deben ser aprobados antes de ser publicados