Hey, streamers! 🙋‍♂️ RxJS 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 github.com/kosich/rxjs-autorun 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: timer { timer } ; { computed, $ } ; a = timer( , _000); result = computed( $(a) + ); result.subscribe( .log(x)); import from 'rxjs' import from 'rxjs-autorun' // timer would emit every second const 0 1 // expression would concat every emission with a cake const => () ' 🍰' // now we should subscribe to the resulting stream => x console // > 0 🍰 // > 1 🍰 // > 2 🍰 // > … 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. Explanation: 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 🍌: { timer, } ; { delay } ; { computed, $ } ; a = timer( , _000); b = ( ).pipe(delay( _000)); result = computed( + $(a) + + $(b)); result.subscribe( .log(x)); import of from 'rxjs' import from 'rxjs/operators' import from 'rxjs-autorun' const 0 1 // get some monkeys const of '🍌' 2 // fetch some treats const => () '🐒 #' ' gets ' // mix => x console // 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: { Subject } ; { computed, $, _ } ; a = Subject(); b = Subject(); computed( $(a) + + _(b))
  .subscribe( .log(x));
a.next( ); b.next( ); a.next( ); b.next( ); a.next( ); import from 'rxjs' import from 'rxjs-autorun' const new // neighbours const new // food => () ' likes ' => x console '🐈' // nothing: b is still empty '🥛' // > 🐈 likes 🥛 '🐭' // > 🐭 likes 🥛 '🍕' // nothing: _(b) doesn't trigger re-runs '🙋‍♂️' // 🙋‍♂️ likes 🍕 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 and — it would react only to updates. Explanation: _ $(a) _(b) 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: { timer, } ; { computed, $, _ } ; a = timer( , _000); b = ( ); c = ( ); result = computed( $(a) % ? _(b) : _(c));
result.subscribe( .log(x)); import of from 'rxjs' import from 'rxjs-autorun' const 0 1 const of '💧' const of '❄' const => () 2 => x console Indeed, this is capricious weather 🙂 Actually, this expression is somewhat similar to switchMap Outro 😳 All the examples you can . try online And there's more to the library, go ! explore it yourself 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 ! twitter 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! 🙏 fkrasnowski ryansolid Johan Psst.. need something more to read? I got you covered: "Turn a Stream of Objects into an Object of Streams" "Fetching Data in React with RxJS and <$> fragment" "Queries for Observables: Crazy & Simple!" "Intro to Recks: Rx+JSX experiment" See you! Also published at https://dev.to/rxjs/rxjs-autorun-cop

Understanding The RxJS Autorun Process

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

How To Access Properties Of Objects On Observables Like A True Expert

10 Useful JavaScript Functions to Learn

10 Cool Angular Material Admin Dashboard Templates

13 Angular App Optimization Tips for Frontend Developers

25 Stories To Learn About Angularjs

16 JavaScript Protips [2020 Edition]

How To Access Properties Of Objects On Observables Like A True Expert

10 Useful JavaScript Functions to Learn

10 Cool Angular Material Admin Dashboard Templates

13 Angular App Optimization Tips for Frontend Developers

25 Stories To Learn About Angularjs

16 JavaScript Protips [2020 Edition]

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps