Turn a Stream of Objects into an Object of Streams

Hi, fellow RxJS streamer! 👋

Today I want to share a JS/TS package that allows you to access props of objects on Observables:

source$.subscribe(o => console.log(o?.a?.b?.c))
// turn ↑ into ↓
source$.a.b.c.subscribe(console.log)

tl;dr: github.com/kosich/rxjs-proxify

A simple use case: read the msg property of each value on the stream

import { proxify } from "rxjs-proxify";
import { of } from "rxjs";

const source = of({ msg: 'Hello' }, { msg: 'World' });
const stream = proxify(source);
stream.msg.subscribe(console.log); // 'Hello', 'World'

The package has good TypeScript support, so all props are intelli-sensed by cats, dogs, and IDEs:

import { of } from 'rxjs';
import { proxify } from 'rxjs-proxify';

const source = of({ a:1, b:1 }, { a:2, b:2 });
const stream = proxify(source);
stream. // <- will suggest .a .b .pipe .subscribe etc

t's also possible to call methods on values (even those using this keyword), e.g.:

import { proxify } from "rxjs-proxify";
import { of } from "rxjs";

const source = of({ msg: () => 'Hello' }, { msg: () => 'World' });
const stream = proxify(source);
// calls msg() fn on each value of the stream
stream.msg().subscribe(console.log); // 'Hello', 'World'

And you are still free to apply RxJS operators at any depth:

import { proxify } from "rxjs-proxify";
import { of } from "rxjs";
import { scan } from "rxjs/operators";

const source = of({ msg: 'Hello' }, { msg: 'World' });
const stream = proxify(source);
stream.msg.pipe(scan((a, c)=> a + c)).subscribe(console.log); // 'HelloWorld'

The package uses Proxies under the hood, recursively applying it to sub-properties and method results, so the chain can be indefinitely deep. And you can apply .subscribe or .pipe at any time!

🎹 Try it

You can install it via npm i rxjs-proxify

Or test it online: stackblitz.com/edit/rxjs-proxify-repl

📖 Repository

The source code and more examples are available on github repo:

github.com/kosich/rxjs-proxify

Outro

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

If you enjoyed reading — please, indicate that with ❤️ 🦄 📘 buttons — it helps a lot!

Soon I'll post a more detailed review of the lib and how it works

Follow me here and on twitter for more RxJS, React, and JS posts:

🗣 Would love to hear your thoughts!

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"

😉

Cya 👋