DEV Community

Discussion on: Turn a Stream of Objects into an Object of Streams

 
fkrasnowski profile image
Franciszek Krasnowski

I've got mixed feelings about all this autorun thing.

  1. It looks very cool. And I love this pattern. I find it clear and convenient
  2. But, RxJS already includes the combineLatest operator for the same purpose, less cool, still clear, and convenient.
  3. But, MobX fans will fall in love with it!

Comparison between some aproaches:

RxJS:

// atom initializtion:
const lizard$ = new BehaviorSubject('🦎');
const wizard$ = of('πŸ§™β€β™‚οΈ');

// reaction / subscription:
combineLatest([lizard$, wizard$]).subscribe(([lizard, wizard]) =>
  console.log(`king gizzard & the ${lizard} ${wizard}`)
);

// update atom:
lizard$.next('πŸ“');

MobX:

// atom initializtion:
const lizard = observable({ emoji: '🦎' });
const wizard = observable({ emoji: 'πŸ§™β€β™‚οΈ' });

// reaction / subscription:
autorun(() =>
  console.log(`king gizzard & the ${lizard.emoji} ${wizard.emoji}`)
);

// update atom:
lizard.emoji = 'πŸ“';

Svelte:

// atom initializtion:
let lizard = '🦎' 
let wizard =  'πŸ§™β€β™‚οΈ' 

// reaction / subscription:
$: console.log(`king gizzard & the ${lizard} ${wizard}`)

// update atom:
lizard = 'πŸ“';

It might look like MobX and Svelte strategy is better, due to their terseness. But RxJS is about operators! And its full force lays in them. Your solution:

// atom initialization:
const lizard$ = new BehaviorSubject('🦎');
const wizard$ = of('πŸ§™β€β™‚οΈ');

// reaction / subscription:
autorun($ => console.log(`king gizzard & the ${$(lizard$)} ${$(wizard$)}`))

// OR with pipe and operators!
run($ =>
  `king gizzard & the ${$(lizard$)} ${$(wizard$)}`).pipe(/* operators */).subscribe(console.log)


// update atom:
lizard$.next('πŸ“');

Best of both worlds??

Glad you add distinctUntilChanged. And I think run could be better named computed or derived or autopiped 😨😝

Thread Thread
 
kosich profile image
Kostia Palchyk • Edited

Totally agree with all three points!
And I love your examples β€” this gives some perspective! Thanks πŸ‘

I've started this only because it was a fun dev challenge, I was sure as an API it's useless and error-prone! Then when it was ready... I began to have doubts πŸ€”πŸ˜„

The shorter notation might make sense in templates like in <$> or Recks...

Probably it's a maker's affection of some sort: when you're painting something for a day long, and you look at it -- and it's crap, you know it's crap but still you kinda like it πŸ˜”

I think, I'll finish and post the state thing.
Maybe even include it into proxify lib (bad naming here too πŸ€¦β€β™‚οΈ)
Still not sure what to do w/ autorun β€” will polish it, then we'll see...


BTW, I've been sharing all this on twitter too, here's a thread
VΓ­ctor Oliva made another cool autorun concept β€” check it out!
(I'd ping you long ago, though haven't found you there)

and here's latest concept w/ state & autorun from twitter:

state and autorun concepts


Thanks for taking your time to look into this on Friday evening πŸ™‚
Have a good weekend!


SATURDAY: okay... I've shared autorun on github github.com/kosich/rxjs-autorun (no npm package, naming is still a problem)

autorun latest