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.
#RxExampleOfTheDay The browser replays 'keydown' events for as long as the user keeps pressing the button.— Kwinten Pisman (@KwintenP) August 12, 2019
This is a stream that emits 'keydown' or 'keyup' whenever the user presses/releases a button. Without having duplicate events 🥳@stackblitz: https://t.co/HrJQ3AAEFi pic.twitter.com/t4jlu1WmnO
Using the conditional
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’.
#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 pic.twitter.com/XePmj7ZrhM— Kwinten Pisman (@KwintenP) August 15, 2019
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.
#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.— Kwinten Pisman (@KwintenP) August 16, 2019
Has saved me quite some time debugging #rxjs 😅
Stackblitz: https://t.co/03bxrUg53H pic.twitter.com/8EpKZNrxXg
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
##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— Kwinten Pisman (@KwintenP) August 19, 2019
SB: https://t.co/cRyHU9LF2I pic.twitter.com/V0J1Sg6e41
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.
#RxExampleOfTheDay Most users, including me, are impatient and when something feels slow, we click a (refresh) button multiple times.— Kwinten Pisman (@KwintenP) August 21, 2019
This behavior in combo with `switchMap` can be a dangerous combination! Often `exhaustMap` is a better option #rxjs
SB: https://t.co/rTKj5MpcAU pic.twitter.com/zsxYcE0h1c