## DEV Community

Kostia Palchyk for RxJS

Posted on

# Much Fun with RxJS-Autorun

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!

## 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 β¦
``````

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 - π β¦
``````

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

``````computed(() => [ \$(a), \$(b) ])
// > [ 0, π ] > [ 1, π ] β¦
``````

Objects:

``````computed(() => ({ a: \$(a), b: \$(b) }))
// > { a: 0, b: π } > { a: 1, b: π } β¦
``````

or even call functions!

``````function toString(count, animal) {
return (count < 3 ? 'some' : 'many') + animal;
}
computed(() => toString( \$(a), \$(b) ))
// > some π > some π β¦ > many π β¦
``````

## 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: π€ β¦
``````

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 β¦
``````

### 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!
``````

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!