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

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

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'

☝️ 

proxify

 will create a Proxy for given Observable

You can even use JS destruction assignment:

const { msg } = proxify(source);
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

👀 I can see your intentions

It's also possible to call methods on values (even those using

this

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'

🤯 pure magic, I tell you

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'

Just like regular Observables!

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 the project's GitHub repo: github.com/kosich/rxjs-proxify

Outro

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 on twitter for more RxJS, React, and JS posts

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

Psst.. need something more to read?

I got you covered:

• "RxJS Autorun Intro"
• Fetching Data in React with RxJS and <$> fragment"
• "Queries for Observables: Crazy & Simple!"
• "Intro to Recks: Rx+JSX experiment"

Cya 👋

Also published at https://dev.to/rxjs/turn-a-stream-of-objects-into-an-object-of-streams-2aed