Turn a Stream of Objects into an Object of Streams
Tags: rxjs, angular, javascript, typescript
Published: 2020-09-18 14:40:56

Hi, fellow RxJS streamer! 👋

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

```ts
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](https://github.com/kosich/rxjs-proxify)

---

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

```ts
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'
```

<figcaption>☝️ <code>proxify</code> will create a Proxy for given Observable</figcaption>

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

```ts
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
```

<figcaption>👀 I can see your intentions</figcaption>

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

```ts
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'
```

<figcaption>🤯 pure magic, I tell you</figcaption>

---

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

```ts
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'
```

<figcaption>Just like regular Observables!</figcaption>

The package uses [Proxies](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) 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](https://stackblitz.com/edit/rxjs-proxify-repl?file=index.ts)

## 📖 Repository

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

[github.com/kosich/rxjs-proxify](https://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](https://twitter.com/kddsky) for more RxJS, React, and JS posts:

{% twitter 1302684300366798849 %}

🗣 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"](https://dev.to/rxjs/turn-a-stream-of-objects-into-an-object-of-streams-2aed)

- ["Fetching Data in React with RxJS and <$> fragment"](https://dev.to/rxjs/fetching-data-in-react-with-rxjs-and-lt-gt-fragment-54h7)

- ["Queries for Observables: Crazy & Simple!"](https://dev.to/kosich/queries-for-observables-crazy-simple-15h3)

- ["Intro to Recks: Rx+JSX experiment"](https://dev.to/kosich/recks-rxjs-based-framework-23h5)

## 😉
Cya 👋