RxJS examples of the day (part 1)

Kwinten Pisman — Sat, 19 Oct 2019 07:01:00 +0000

Having worked with and teaching RxJS for quite some time now, I always felt that the way RxJS is explained is very theoretical. For that reason, I started tweeting out these practical RxJS examples that I basically plucked from my own codebases.
This blog post will hopefully be part of a series (depending on my inspiration ☺️). Here are the first 5.

Handle replaying of keydown events

The browser replays 'keydown' events for as long as the user keeps pressing the button. Often times, you just want to have the 'keydown' event as a trigger but want to remove the duplicate ones without constantly removing and reading the eventlistener.

Kwinten Pisman

@kwintenp

#RxExampleOfTheDay The browser replays 'keydown' events for as long as the user keeps pressing the button.

This is a stream that emits 'keydown' or 'keyup' whenever the user presses/releases a button. Without having duplicate events 🥳

@stackblitz: stackblitz.com/edit/rxjs-ro5b…

09:13 AM - 12 Aug 2019

18 78

Using the conditional `iif` operator

The iif operator helps when your initial stream depends on a condition. Without the operator, we would have to write a pretty ugly (and imperative) 'if-else'.

Kwinten Pisman

@kwintenp

#RxExampleOfTheDay Whenever your initial stream depends on a condition, it's best to use the `iif` operator instead of declaring a variable and then assigning it in an if-else. #rxjs

19:54 PM - 15 Aug 2019

41 155

When and how many times is a stream subscribed to

Knowing when and how many times a stream is subscribed to can be extremely valuable information to have when working with RxJS. If you for instance have multiple backend calls that are triggered, this info can help pinpoint the issue.

Kwinten Pisman

@kwintenp

#RxExampleOfTheDay A small utility to make debugging a little easier. An operator that logs out IF an Observable was subscribed to AND how many times it was subscribed to.
Has saved me quite some time debugging #rxjs 😅

Stackblitz: stackblitz.com/edit/rxjs-rmfi…

15:14 PM - 16 Aug 2019

11 40

Optimising your autocompletes

When the user starts typing, you typically want to remove the existing results in an autocomplete as they don't match what the user was typing no more. You can do this by branching existing streams instead of resorting to side effects or Subjects.

Kwinten Pisman

@kwintenp

##RxExampleOfTheDay With an autocomplete, clear the old results when the user types. Don't use Subjects or side effects with a tap to do that! Just create multiple streams from the 'input$' for 'resetting' and 'searching' and then merge them. #rxjs

SB: stackblitz.com/edit/rxjs-gx83…

14:08 PM - 19 Aug 2019

10 42

Using exhaustMap as a flattening operator

Sometimes you want to avoid the user constantly canceling calls. If a call is already on it's way, we probably want to continue that one first. Using exhaustMap is the perfect operator for that.

Kwinten Pisman

@kwintenp

#RxExampleOfTheDay Most users, including me, are impatient and when something feels slow, we click a (refresh) button multiple times.
This behavior in combo with `switchMap` can be a dangerous combination! Often `exhaustMap` is a better option #rxjs

SB: stackblitz.com/edit/rxjs-mwyz…

12:02 PM - 21 Aug 2019

23 77