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
property of each value on the streamimport { 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'
āļøĀĀ will create a Proxy for given Observableproxify
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
keyword), e.g.: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 š