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
