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.
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'.
#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. #rxjs19:54 PM - 15 Aug 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.
Has saved me quite some time debugging #rxjs 😅
Stackblitz: stackblitz.com/edit/rxjs-rmfi…15:14 PM - 16 Aug 2019
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.
##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
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.
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
Top comments (0)