RxJS Proxy: 3 new features
Tags: rxjs, angular, webdev, frontend
Published: 2020-10-23 11:04:57

_amazing header photo by <a href="https://unsplash.com/@zacharykadolph?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Zach Kadolph</a>_

Hi! 👋 In the previous post, I've introduced you to `rxjs-proxify` that turns your Observable into an Object of Observables:

```ts
const o = of({ msg: 'Hello' }, { msg: 'World' });
const p = proxify(o);
p.msg.subscribe(console.log); // > Hello > World
```

Today I'll show you what new abilities you get with the recent `0.0.10` release: now `proxify` can be applied not only on Observables but also on Subjects and BehaviorSubjects. Also, we get a `statify` method that will help you manage the local state!

**tl;dr** try & install: [github.com/kosich/rxjs-proxify](https://github.com/kosich/rxjs-proxify#readme)

## 📖 Intro

![Observables, Subjects, and BehaviorSubjects](https://dev-to-uploads.s3.amazonaws.com/i/1jhj3hzkamywh18uwzb2.jpg)

<figcaption>Left to right: Observable, Subject, and BehaviorSubject. Cute photo by <a href="https://unsplash.com/@theluckyneko?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">The Lucky Neko</a>.
</figcaption>

---

**Observable Proxy** (already familiar to you)
_subscribe at any depth_

```ts
const observable = proxify( of({ p: '🐑' }) );
observable.subscribe(console.log); // > { p: 🐑 }
observable.p.subscribe(console.log); // > 🐑
```

It will be handy if you need to access many sub-properties on your streams:

```tsx
// framework agnostic model
const { title, body } = proxify( fetchArticle() );
// framework agnostic view
<article>
  <Title value={ title } />
  <Body value={ body } />
</article>
```

Note that here we're creating two separate Observables, so you'll probably want to `.pipe( share() )` inside `fetchArticle`.

---

**Subject Proxy**
_subscribe at any depth, push at the root_

```ts
const subject = proxify(new Subject<{ p: string }>());
subject.subscribe(console.log);
subject.p.subscribe(console.log);
subject.next({ p: '🐥' }); // > { p: 🐥 } // > 🐥
```

While you have all the benefits of Observable Proxy, you can also update the whole Subject value.

---

**BehaviorSubject Proxy**

_subscribe at any depth, push at any depth, synchronously read the current state_

```ts
const behavior = proxify(new BehaviorSubject({ p: '🐖' }));
behavior.p.subscribe(console.log); // > 🐖
behavior.p.next('🐇'); // > 🐇
console.log(behavior.p.value) // > 🐇
```

In addition to Observable Proxy, you can synchronously read and update the state at any level!

```ts
// model
const s = proxify(
  new BehaviorSubject({ title: '', checked: false })
);
// view
<div>
  <input
    value={ s.title }
    onChange={ e => s.title.next(e.target.value) } />
  <input
    type="checkbox"
    checked={ s.checked }
    onChange={ e => s.checked.next(e.target.checked) } />
</div>
```

---

**State proxy**

And we also export a `statify` function that creates a BehaviorSubject Proxy with a `distinctUntilChanged` on all its properties:

```ts
// create a state
const state = statify({ a: '🐰', z: '🏡' });

// listen to & log root state changes
state.subscribe(console.log); //> { a:🐰 z:🏡 }

// update particular substate
state.a.next('🐇'); //> { a:🐇 z:🏡 }
state.a.next('🐇'); //> same value, no update

// read current values
console.log(state.z.value + state.a.value); //> 🏡🐇

// update root state, still logging
state.next({ a: '🐇', z: '☁️' }) //> { a:🐇 z:☁️ }

// and then…
state.z.next('🌙');   //> { a:🐇  z:🌙 }
state.a.next('🐇👀'); //> { a:🐇👀 z:🌙 }
state.z.next('🛸')    //> { a:🐇👀 z:🛸 }
state.a.next('💨');   //> { a:💨  z:🛸 }
```

---

That's it! Just a few words before you go:

## 🎉 Outro

You can try `proxify` [online](https://stackblitz.com/edit/rxjs-proxify-repl).

And you'll find more examples and the installation guide at [github.com/kosich/rxjs-proxify](https://github.com/kosich/rxjs-proxify#readme). Hope you'll find these little tools useful!

If you enjoyed reading — please, indicate that with ❤️ 🦄 📘 buttons

Follow me here and on [twitter](https://twitter.com/kddsky) for more RxJS, React, and JS posts!

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

And thanks to @fkrasnowski for discussing with me and polishing this idea in the previous post comments!