181 reads

Understanding The RxJS Autorun Process

by November 9th, 2020

Too Long; Didn't Read

The RxJS Autorun Process is a small library that re-evaluates an expression based on updates in streams it uses. It returns an observable that you can manipulate further. The library takes a function that uses some streams and reevaluates it when those streams update. It also takes an ability to read the latest values without tracking their updates. It's a sweetened countdown timer that would represent a queue of monkeys with a stream of fetched bananas. The last trick we're gonna learn today is a ability to use the library without tracking updates.

Companies Mentioned

featured image - Understanding The RxJS Autorun Process

Hey, RxJS streamers! 🙋‍♂️

Today we're going to review a small library that re-evaluates an expression based on updates in streams it uses.

tl;dr: docs and package at 🔗

Let's boldly explore it!

It's a sweetened countdown

Our first example.Say, we want to prettify each value on a stream. So we'll write such an expression:

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

// timer would emit every second
const a = timer(0, 1_000);
// expression would concat every emission with a cake
const result = computed(() => $(a) + ' 🍰');
// now we should subscribe to the resulting stream
result.subscribe(x => console.log(x));
// > 0 🍰
// > 1 🍰
// > 2 🍰
// > …

Explanation: computed takes a function that uses some streams and re-evaluates it when those streams update. It returns an observable that you can manipulate further. And $(a) indicates that a is a stream and its updates should be listened to.

So technically this expression is equivalent to

a.pipe( map(x => x + '🍰') )

But let's keep discovering what else this tiny lib can do:

Infinite monkey theorem needs infinite bananas

Here we'll combine a timer that would represent a queue of our little 🐒 fellas with a stream of fetched bananas 🍌:

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

const a = timer(0, 1_000); // get some monkeys
const b = of('🍌').pipe(delay(2_000)); // fetch some treats
const result = computed(() => '🐒 #' + $(a) + ' gets ' + $(b)); // mix
result.subscribe(x => console.log(x)); // listen to result stream
// ...2s gap...
// > 🐒 #1 gets 🍌
// > 🐒 #2 gets 🍌
// > 🐒 #3 gets 🍌
// > …

Not hard at all, is it?

This expression is similar to

combineLatest(a, b).pipe( map(([x,y]) => x + y) )

Let's review another multiple streams example:

Who's up to some pizza?

The last trick we're gonna learn today is an ability to read the latest values without tracking their updates:

import { Subject } from 'rxjs';
import { computed, $, _ } from 'rxjs-autorun';

const a = new Subject(); // neighbours
const b = new Subject(); // food
computed(() => $(a) + ' likes ' + _(b))
  .subscribe(x => console.log(x));
a.next('🐈'); // nothing: b is still empty
b.next('🥛'); // > 🐈 likes 🥛
a.next('🐭'); // > 🐭 likes 🥛
b.next('🍕'); // nothing: _(b) doesn't trigger re-runs
a.next('🙋‍♂️'); // 🙋‍♂️ likes 🍕

Explanation:

function indicates that we need to take one value from a stream, but we don't want to recalculate our expression when this particular stream emits. So if an expression uses

$(a)

and

_(b)

— it would react only to updates.

This also means that computed(() => _(a)) expression would emit one value and immediately complete.Okay, one really the last thing before we wrap-up:

Transformation

This time, try to guess what it is:

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

const a = timer(0, 1_000);
const b = of('💧');
const c = of('❄');
const result = computed(() => $(a) % 2 ? _(b) : _(c));
result.subscribe(x => console.log(x));

Indeed, this is capricious weather 🙂

Actually, this expression is somewhat similar to

Outro 😳

All the examples you can .And there's more to the library, go !In the following articles, we'll review how to filter emissions and how to manage subscriptions inside rxjs-autorun expressions. Not to miss those and other RxJS posts — follow me here and on !

Thank you for reading this article! Stay reactive and have a nice day 🙂

I want to thank for lengthy discussions of this idea, for giving it a try, and for collaborating with me on this! 🙏

Psst.. need something more to read?

I got you covered:

See you!

Also published at

L O A D I N G
. . . comments & more!

Understanding The RxJS Autorun Process

Too Long; Didn't Read

Companies Mentioned

It's a sweetened countdown

Infinite monkey theorem needs infinite bananas

Who's up to some pizza?

Transformation

Outro 😳

Psst.. need something more to read?

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES