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

Understanding The RxJS Autorun Process

Too Long; Didn't Read

Make resilience your competitive advantage

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Understanding The RxJS Autorun Process

10 Useful JavaScript Functions to Learn

10 Cool Angular Material Admin Dashboard Templates

13 Angular App Optimization Tips for Frontend Developers

25 Stories To Learn About Angularjs

Understanding The RxJS Autorun Process

10 Useful JavaScript Functions to Learn

10 Cool Angular Material Admin Dashboard Templates

13 Angular App Optimization Tips for Frontend Developers

25 Stories To Learn About Angularjs

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps