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: 

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  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: 

📖 Repository

The source code and more examples are available on the project's GitHub repo:

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  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:

Cya 👋

Also published at