Much Fun with RxJS-Autorun

Kostia Palchyk - Oct 27 '20 - - Dev Community

Hi! πŸ‘‹

Today I'll show you some tricks using rxjs and rxjs-autorun that we reviewed in the previous post. Let's quickly recap what it does:

  1. you pass it an expression that uses some streams
  2. whenever those streams emit, autorun runs the expression with new values
  3. you get a stream of those evaluations results

Now let's go fast explore what we can do with it!

impatient doggy

Mapping a single stream: 🌱 🌿 🌳

The most basic usage: we have a stream t of growing integer values: 0, 1, 2, etc (RxJS timer will create us one). And we want to substitute that integer with a string: "even" or "odd":

const t = timer(0, 1_000);
computed(() => $(t) % 2 ? 'odd' : 'even');
// Result:
// > even > odd > even > odd …
Enter fullscreen mode Exit fullscreen mode

Explanation: $(t) will wait until stream t emits a value. Then with every value emission, computed will re-evaluate its expression, putting the result into the output stream.

Combinations: πŸ“¦ + πŸŽ€ = 🎁

By tracking multiple streams inside expressions we can combine emissions from these streams:

import { timer, of } from 'rxjs';
import { computed, $ } from 'rxjs-autorun';

const a = timer(0, 1_000);
const b = of('πŸ‡');
computed(() => $(a) + ' - ' + $(b))
// > 0 - πŸ‡ > 1 - πŸ‡ > 1 - πŸ‡ …
Enter fullscreen mode Exit fullscreen mode

Similarly to combining into strings, we can combine into Arrays:

computed(() => [ $(a), $(b) ])
// > [ 0, πŸ‡ ] > [ 1, πŸ‡ ] …
Enter fullscreen mode Exit fullscreen mode

Objects:

computed(() => ({ a: $(a), b: $(b) }))
// > { a: 0, b: πŸ‡ } > { a: 1, b: πŸ‡ } …
Enter fullscreen mode Exit fullscreen mode

or even call functions!

function toString(count, animal) {
  return (count < 3 ? 'some' : 'many') + animal;
}
computed(() => toString( $(a), $(b) ))
// > some πŸ‡ > some πŸ‡ … > many πŸ‡ …
Enter fullscreen mode Exit fullscreen mode

Switching: 🌀 🌧

Now, imagine we have a function getWeather that returns an Observable with the weather forecast for a given city. Using the same ?: from the first example we could create a widget to show weather for two cities:

const t = timer(0, 1_000);
const nice = getWeather('Nice'); // => Observable<'Nice: 🌀'>
const cannes = getWeather('Cannes'); // => Observable<'Cannes: 🌧'>
computed(() => $(t) % 2 ? $(nice) : $(cannes));
// > Cannes: 🌧 > Nice: 🌀 > Cannes: 🌧 > Nice: 🌀 …
Enter fullscreen mode Exit fullscreen mode

Tricks: πŸ‡ 🎩

Now, remember I said that $(…) will wait for the stream to emit its first value before continuing evaluation. Let's do some tricks exploiting this rxjs-autorun feature!

Filtering

computed will wait for every observable to emit in order to produce a value. But what if we pass it a never emitting Observable: NEVER? Correct, this will pause emission until other tracked Observable emits:

const a = timer(0, 1_000);
computed(() => $(a) % 2 ? $(NEVER) : $(a) + ' even' );
// > 0 even > 2 even > 4 even …
Enter fullscreen mode Exit fullscreen mode

Take while

Similarly to NEVER, we can exploit awaiting by passing it an Observable that completes never ever emitting a value: EMPTY. If an expression relies on a stream that we know won't emit a value β€” then surely the resulting Observable won't emit either! So computed completes:

const a = timer(0, 1_000);
const c = computed(() => $(a) < 5 ? $(a) : $(EMPTY));
// > 0 > 1 > 2 > 3 > 4 > COMPLETE!
Enter fullscreen mode Exit fullscreen mode

NOTE: this feature is in beta-testing now and will be available with the next release

Bonus: πŸ™‚

I showed you two functions: computed to run expressions and $ to track values. But $ has a sibling! A _ function, similarly to $, will read the current value of a stream but it won't trigger expression re-evaluation if that stream updates!

Now, imagine the examples above if you mix $ and _. Got you thinking, eh? Then imagine that all the computed streams can be used in other computed expressions!

πŸ™‚ β†’ 😲 β†’ 🀯

Outro: πŸ›ΈπŸ’¨

You'll find the docs and the library here: github.com/kosich/rxjs-autorun

I hope you had fun! If you enjoyed reading β€” please, indicate that with ❀️ πŸ¦„ πŸ“˜ buttons β€” it helps a lot!

Follow me here and on twitter for more RxJS, React, and JS posts!

Thank you for reading this article! Stay reactive and have a nice day πŸ™‚

Cya! πŸ‘‹

Psst.. need something more to read?

I got you covered:

πŸ˜‰

. . . . . . . . . . . . . . . . .
Terabox Video Player