--- title: Reactive Data Using Angular & RxJS Blog Article by Full-Stack Engineer description: So you’ve moved on long ago from storing data on the browser’s global window object. That’s a good start, but we can do better using reactive data stores. image: https://blog.ippon.tech/hubfs/Imported_Blog_Media/Reactive-Data-Using-Angular---RxJS-Blog--2--3.png --- [Skip to main content](https://blog.ippon.tech/reactive-data-using-angular-and-rxjs#main) [![IpponLogoKleinBlue](https://blog.ippon.tech/hs-fs/hubfs/IpponLogoKleinBlue.png?width=219&height=64&name=IpponLogoKleinBlue.png) ![IpponLogoKleinBlue](https://blog.ippon.tech/hs-fs/hubfs/IpponLogoKleinBlue.png?width=219&height=64&name=IpponLogoKleinBlue.png) ![IpponLogoKleinBlue](https://blog.ippon.tech/hs-fs/hubfs/IpponLogoKleinBlue.png?width=168&height=49&name=IpponLogoKleinBlue.png) ![IpponLogoKleinBlue](https://blog.ippon.tech/hs-fs/hubfs/IpponLogoKleinBlue.png?width=168&height=49&name=IpponLogoKleinBlue.png)](https://ipponusa.com/) - [Home](https://ipponusa.com) - [Show submenu for About About](https://ipponusa.com/about-us) - [Who We Are](https://ipponusa.com/who-we-are) - [Careers](https://ipponusa.com/careers) - [Show submenu for Our Partners Our Partners](https://ipponusa.com/our-partners/) - [AWS](https://ipponusa.com/our-partners/aws/) - [Snowflake](https://ipponusa.com/our-partners/snowflake/) - [Databricks](https://ipponusa.com/our-partners/databricks/) - [Microsoft](https://ipponusa.com/our-partners/microsoft/) - [Show submenu for Services Services](https://ipponusa.com/services) - [Snowflake](https://ipponusa.com/service/snowflake-concierge/) - [Artificial Intelligence](https://ipponusa.com/service/artificial-intelligence/) - [Data & Analytics](https://ipponusa.com/service/data-analytics/) - [Cloud Strategy](https://ipponusa.com/service/cloud-strategy/) - [Platform Modernization](https://ipponusa.com/service/platform-moderization/) - [Product Innovation](https://ipponusa.com/service/product-innovation/) - [Operating Model](https://ipponusa.com/service/operating-model/) - [Blogs](https://blog.ippon.tech/) - [Success Stories](https://ipponusa.com/success-stories/) - [Show submenu for Resources Resources](https://ipponusa.com/resources/) - [eBooks](https://ipponusa.com/ebooks/) - [The Data Pour](https://info.ippon.tech/the-data-pour) - [Videos & Webinars](https://info.ippon.tech/videos-and-webinars) - [Media Center](https://ipponusa.com/media-center/) Search Open main navigation Close main navigation - [Home](https://ipponusa.com) - Show submenu for About About - About - [About](https://ipponusa.com/about-us) - [Who We Are](https://ipponusa.com/who-we-are) - [Careers](https://ipponusa.com/careers) - Show submenu for Our Partners Our Partners - Our Partners - [Our Partners](https://ipponusa.com/our-partners/) - [AWS](https://ipponusa.com/our-partners/aws/) - [Snowflake](https://ipponusa.com/our-partners/snowflake/) - [Databricks](https://ipponusa.com/our-partners/databricks/) - [Microsoft](https://ipponusa.com/our-partners/microsoft/) - Show submenu for Services Services - Services - [Services](https://ipponusa.com/services) - [Snowflake](https://ipponusa.com/service/snowflake-concierge/) - [Artificial Intelligence](https://ipponusa.com/service/artificial-intelligence/) - [Data & Analytics](https://ipponusa.com/service/data-analytics/) - [Cloud Strategy](https://ipponusa.com/service/cloud-strategy/) - [Platform Modernization](https://ipponusa.com/service/platform-moderization/) - [Product Innovation](https://ipponusa.com/service/product-innovation/) - [Operating Model](https://ipponusa.com/service/operating-model/) - [Blogs](https://blog.ippon.tech/) - [Success Stories](https://ipponusa.com/success-stories/) - Show submenu for Resources Resources - Resources - [Resources](https://ipponusa.com/resources/) - [eBooks](https://ipponusa.com/ebooks/) - [The Data Pour](https://info.ippon.tech/the-data-pour) - [Videos & Webinars](https://info.ippon.tech/videos-and-webinars) - [Media Center](https://ipponusa.com/media-center/) - Search - [Contact Us](https://ipponusa.com/contact/) [Contact Us](https://ipponusa.com/contact/) # Reactive Data Using Angular & RxJS Blog Article by Full-Stack Engineer ![John Strickler](https://app.hubspot.com/settings/avatar/d41d8cd98f00b204e9800998ecf8427e) by [John Strickler](https://blog.ippon.tech/author/john-strickler) July 12, 2017 ![Reactive Data Using Angular and RxJS](https://blog.ippon.tech/hubfs/Imported_Blog_Media/Reactive-Data-Using-Angular---RxJS-Blog--2--3.png) [Angular](https://blog.ippon.tech/tag/angular/)   [John Strickler](https://blog.ippon.tech/author/john/) Jul 12, 2017   The web has become reactive. Web applications are being packed with more API calls and are consuming more third-party data than ever before. Frameworks and patterns are evolving to satisfy the increased complexity. Data needs are shifting, and managing data in the global state just won’t cut it anymore. Okay, so you’ve moved on long ago from storing data on the browser’s global window object. That’s a good start, but we can do better. Do your web components query for data changes, or do they ***react*** to data changes? The difference is a pull vs ***push-based*** approach, traditional vs ***modern***, imperative vs ***reactive***… you get the picture. The solution to controlling and scaling your front-end data is in utilizing reactive data stores. ### Problem meet Solution In Angular, components consume data and services produce it. Components should be decoupled. They shouldn’t depend on each other, but they often depend on the same data. For instance, if `Component A` and `Component B` need data from `Service C`, then each component must query the service. There are two downsides to this approach. First, if the service is providing remote data, then it will make duplicate API calls, one for each invocation. Second, querying a service for data is a one-time request and components are unaware of future changes. ![](https://blog.ippon.tech/hubfs/Imported_Blog_Media/service-c-2.png) Reactive stores fill this void by acting as local push-based caches between the components and the services. In this scenario, `Component A` and `Component B` subscribe to `Store D` for data. `Store D` then uses `Service C` to load data and the components are left blissfully unaware to how the data is actually fulfilled. ![](https://blog.ippon.tech/hubfs/Imported_Blog_Media/store-d-2.png) ### Building a Store Reactive stores are just a pattern, and Angular + RxJS are the tools. A store is a plain class that is decorated as an Angular injectable and that wraps a RxJS Subject. The subject itself is an implementation detail, which is exposed as an observable stream. For example, below is a self-loading store that exposes a data stream of customer information: ``` @Injectable() export class CustomerStore { // for lazy-loading initialized = false; // prefer a ReplaySubject with a buffer of 1 private subject = new ReplaySubject(1); constructor(private customerStore: CustomerStore) { } // expose as an observable stream getCustomer(): Observable { // asynchronously loads the data on the first subscription to the store if (!this.initialized) { this.initialized = true; this.customerService.retrieveCustomer().subscribe((customer) => { this.subject.next(customer); }); } return this.subject.asObservable(); } } ``` The implementation of the above store has these benefits: - **Push-based data stream.** Components are always provided the latest data. - **Lazy-loading.** Data is loaded on first use. - **No duplicate HTTP requests.** The store takes control of making HTTP requests. #### Managing Store State Stores act as local data caches. Their data contents have to be managed properly or risk becoming stale. There are three \[good\] ways to manage the state of a store: - Load *(ex. lazy-loading or manual)* - Action *(ex. updates)* - Scope Stores wrap the service that components would otherwise be using to directly load data. In the previous example, the store was loaded on its first invocation. Since stores are just a pattern, you can implement your own way to load a store, either manually (explicitly call a method from your component) or automatically (lazily on first subscription). Actions can (and should) manipulate the store state. In fact, any action, such as an edit or deletion, should be handled through the store. This way, the store handles the propagation of change back to its subscribers. Stores can be scoped using Angular's [hierarchical dependency injection](https://angular.io/guide/hierarchical-dependency-injection?ref=blog.ippon.tech). Scope is important, and it varies by use case, but the idea is that a store is only relevant to a specific group of components for a specific period of time. Stores don't necessarily need to persist globally throughout an entire application. ![](https://blog.ippon.tech/hubfs/Imported_Blog_Media/scoped-store-2.png) For example, a `CustomerStore` can be scoped to the `CustomerPageComponent` by marking it as a provider to that component. A store scoped in this way also makes the `CustomerStore` available to all child components of `CustomerPageComponent`. ``` @Component({providers:[CustomerStore]}) class CustomerPageComponent {} ``` This ensures that when the `CustomerPageComponent` is destroyed then so is the `CustomerStore` along with its data. #### Subscription Cleanup The lifespan of a store is usually longer than the components that use them. Components are constantly destroyed and created during application use. The subscriptions that these components create will continue to live on and cause a memory leak unless they are cleaned up. Luckily, there is a simple convention for handling subscription cleanup. We can make use of the component's `ngOnDestroy` lifecycle hook and RxJs's `takeWhile` operator. ``` @Component export class CustomerPageComponent implements OnInit, OnDestroy { alive = true; customer: Customer; constructor(private customerStore: CustomerStore) { } ngOnInit() { // the observable will automatically remove this // subscription when `alive` is false this.customerStore.getCustomer() .takeWhile(this.alive) .subscribe((customer) => { this.customer = customer; }); } ngOnDestroy() { this.alive = false; } } ``` #### Wrapping up Stores are just another tool in the toolbox. They shine in large applications, but also have practical use cases in smaller ones too. Hopefully you'll find a lot of benefit in using them in your next or current web application. If you have any questions, please feel free to comment or drop me a line at [jstrickler@ipponusa.com](mailto:jstrickler@ipponusa.com). ## Related Articles ##### [![Cache Me Outside: Essential Caching Techniques for Building High-Performance SPAs](https://lh7-us.googleusercontent.com/hTxYYqsViJq3uEodjbK5AdUiM__KjHjGhAi2By6r4wXrI6QIUzKlWrbcJZwazwjRJRddSv1ONjooJmK9npysamb5X3d7er05swo8JR9Qjw6Qvt15Ro2w89JhV11mfeWEVP5kbq2NmdvmQdn1lEHqyWY) Vue • February 8, 2024 Cache Me Outside: Essential Caching Techniques for Building High-Performance SPAs 5 min read](https://blog.ippon.tech/essential-caching-techniques-for-building-high-performance-spas) ##### [![How to Create a Quick React and Angular App with JHipster Lite](https://blog.ippon.tech/hs-fs/hubfs/Imported_Blog_Media/jhipster_lite_logo-3.png?width=520&height=294&name=jhipster_lite_logo-3.png) JHipster Lite • December 16, 2022 How to Create a Quick React and Angular App with JHipster Lite 8 min read](https://blog.ippon.tech/how-to-create-a-quick-react-and-angular-app-with-jhipster-lite) ##### [![How to Choose Between React, Angular, and Vue?](https://blog.ippon.tech/hs-fs/hubfs/Imported_Blog_Media/How-to-Choose-Between-React-Angular-and-Vue-3.png?width=520&height=294&name=How-to-Choose-Between-React-Angular-and-Vue-3.png) Vue • February 10, 2022 How to Choose Between React, Angular, and Vue? 7 min read](https://blog.ippon.tech/how-to-choose-between-react-angular-and-vue) ### Comments ### Subscribe to Our Blog! Stay informed with the latest insights and updates by signing up for our weekly blog newsletter – delivered straight to your inbox! [Back to blog homepage »](https://blog.ippon.tech/) ![IpponLogoKleinBlue](https://blog.ippon.tech/hs-fs/hubfs/IpponLogoKleinBlue.png?width=247&height=73&name=IpponLogoKleinBlue.png "IpponLogoKleinBlue") Ippon is a consulting and expertise firm, who is convinced that technology is a source of progress for society. We help our clients leverage their digital assets to design an appropriate strategy and deploy their transformation roadmap at scale. #### Navigation - [Home](https://ipponusa.com/) - [About](https://ipponusa.com/about-us/) - [Services](https://ipponusa.com/services/) - [Blogs](https://blog.ippon.tech/?__hstc=223043268.1036d82247623b329dfefe4e92697801.1714729179243.1714729179243.1714729179243.1&__hssc=223043268.2.1714729179244&__hsfp=803678701) - [eBooks](https://ipponusa.com/ebooks/) - [The Data Pour](https://info.ippon.tech/the-data-pour?__hstc=223043268.1036d82247623b329dfefe4e92697801.1714729179243.1714729179243.1714729179243.1&__hssc=223043268.2.1714729179244&__hsfp=803678701) [Contact Us](https://ipponusa.com/contact/) [Join Us](https://ipponusa.com/careers/) #### Services - [Data & Analytics](https://ipponusa.com/service/data-analytics/) - [Cloud Strategy](https://ipponusa.com/service/cloud-strategy/) - [Artificial Intelligence](https://ipponusa.com/service/artificial-intelligence/) - [Operating Model](https://ipponusa.com/service/operating-model/) - [Platform Modernization](https://ipponusa.com/service/platform-moderization/) - [Product Innovation](https://ipponusa.com/service/product-innovation/) #### Ippon International - [France](https://fr.ippon.tech/?__hstc=223043268.1036d82247623b329dfefe4e92697801.1714729179243.1714729179243.1714729179243.1&__hssc=223043268.2.1714729179244&__hsfp=803678701) - [Australia](https://au.ippon.tech/?__hstc=223043268.1036d82247623b329dfefe4e92697801.1714729179243.1714729179243.1714729179243.1&__hssc=223043268.2.1714729179244&__hsfp=803678701) - #### Contact - Ippon Technologies [3431 West Leigh Street Richmond, VA 23230, USA](https://maps.app.goo.gl/RySm6SAwZnsxeiLz9) - [(844) 477- 6687](tel:8444776687) - [Sales@ipponusa.com](mailto:Sales@ipponusa.com) ©Copyright 2024 Ippon USA. All Rights Reserved.   |   [Terms and Conditions](https://ipponusa.com/privacy-policy/)   |   [Privacy Policy](https://ipponusa.com/privacy-policy/)   |   [Website by Skol Marketing](https://skolmarketing.com/) ```json { "@context" : "https://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "John Strickler", "url" : "https://blog.ippon.tech/author/john-strickler" }, "dateModified" : "2024-01-25T19:37:29.791Z", "datePublished" : "2017-07-12T18:37:00.000Z", "headline" : "Reactive Data Using Angular & RxJS Blog Article by Full-Stack Engineer", "image" : [ "https://blog.ippon.tech/hubfs/Imported_Blog_Media/Reactive-Data-Using-Angular---RxJS-Blog--2--3.png" ], "mainEntityOfPage" : { "@id" : "https://blog.ippon.tech/reactive-data-using-angular-and-rxjs", "@type" : "WebPage" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://blog.ippon.tech/hubfs/logo_SVG.svg" }, "name" : "Ippon Technologies" } } ```