Kostia Palchyk
Posted on October 23, 2020
amazing header photo by Zach Kadolph
Hi! 👋 In the previous post, I've introduced you to rxjs-proxify that turns your Observable into an Object of Observables:
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
📖 Intro
Observable Proxy (already familiar to you)
subscribe at any depth
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:
// 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
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
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!
// 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:
// 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.
And you'll find more examples and the installation guide at github.com/kosich/rxjs-proxify. Hope you'll find these little tools useful!
If you enjoyed reading — please, indicate that with ❤️ 🦄 📘 buttons
Follow me here and on twitter 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!
Posted on October 23, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related