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( .log(o?.a?.b?.c)) source$.a.b.c.subscribe( .log) => o console // turn ↑ into ↓ console tl;dr: github.com/kosich/rxjs-proxify A simple use case: read the property of each value on the stream msg { proxify } ; { of } ; source = of({ msg: }, { msg: }); stream = proxify(source);
stream.msg.subscribe( .log); import from "rxjs-proxify" import from "rxjs" const 'Hello' 'World' const console // 'Hello', 'World' ☝️ proxify will create a Proxy for given Observable You can even use JS destruction assignment: { msg } = proxify(source);
msg.subscribe( .log); const console // 'Hello', 'World' The package has good TypeScript support, so all props are intelli-sensed by cats, dogs, and IDEs: { of } ; { proxify } ; source = of({ a: , b: }, { a: , b: }); stream = proxify(source);
stream. import from 'rxjs' import from 'rxjs-proxify' const 1 1 2 2 const // <- will suggest .a .b .pipe .subscribe etc 👀 I can see your intentions It's also possible to call methods on values (even those using keyword), e.g.: this { proxify } ; { of } ; source = of({ msg: }, { msg: }); stream = proxify(source); stream.msg().subscribe( .log); import from "rxjs-proxify" import from "rxjs" const => () 'Hello' => () 'World' const // calls msg() fn on each value of the stream console // 'Hello', 'World' 🤯 pure magic, I tell you And you are still free to apply RxJS operators at any depth: { proxify } ; { of } ; { scan } ; source = of({ msg: }, { msg: }); stream = proxify(source);
stream.msg.pipe(scan( a + c)).subscribe( .log); import from "rxjs-proxify" import from "rxjs" import from "rxjs/operators" const 'Hello' 'World' const ( )=> a, c console // '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! Proxies 🎹 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 for more RxJS, React, and JS posts twitter 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 👋 Also published at https://dev.to/rxjs/turn-a-stream-of-objects-into-an-object-of-streams-2aed

Chain

Twitter

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

How To Access Properties Of Objects On Observables Like A True Expert

Too Long; Didn't Read

Company Mentioned

Coin Mentioned

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

How To Access Properties Of Objects On Observables Like A True Expert

Too Long; Didn't Read

Company Mentioned

Coin Mentioned

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES