Reactive Services with RxJS
Tags: angular, rxjs, architecture, webdev
Published: 2020-10-01 04:20:00

---
title: Reactive Services with RxJS
published: 1 Oct 2020
description: How solve component communication problem by using  Reactive Services 🔥
tags: angular, rxjs, architecture, webdev
series: Progressive State Management
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bjulytolwp95tpm5z5n2.png
published: true
---
<!---
| Progressive State Management       |
| -------------  |
| Reactive Services with RxJS       |
| [From Reactive Services to NGXS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rzmdfjll8hxf0kax6c1i.png)     |
| coming soon...      |
-->

>_This is the first article, aka **State Management Level 1** of the series **Progressive State Management**_.

There are a lot of state management solutions that are available for Angular. However, do we always need to bring a fully-featured state management solution into our apps? Let's think about it.

Some main challenges building single-page applications we have to tackle are component communication and data flow. So that problems can be solved just by bringing the state management solution. However, state management solutions may introduce an additional level of complexity. As a result of that applications can become too hard and too expensive to maintain in the long run. So we should consider using state management solutions very carefully, based on the particular use-case scenario and remember about all the costs that come with that.

Being an Angular developer implies to be familiar with the basic concepts of [RxJS](https://www.learnrxjs.io/learn-rxjs/subjects/behaviorsubject). Which leads to the question of why don't we just use the powers or [RxJS BehaviorSubject](https://stackoverflow.com/a/40231605/415078) to solve the component communication? This way we can manage the data flow in our applications without introducing additional complexity. So, by using [RxJS BehaviorSubject](https://stackoverflow.com/a/40231605/415078) we can keep the solution simple, this approach works well on a small to medium scale. Let's see how we can achieve that.

Here is how **reactive service** might look like:

{% gist https://gist.github.com/kuncevic/a8a88a4ddf52226aaf58595c1ed2b39f file=reactive-services-1.ts %}

Can we improve that code?  - yes, we can.

What we can do now is to reduce a bit of boilerplate in our **reactive service** by using an [rx-service](https://github.com/kuncevic/rx-service) library 

[rx-service](https://github.com/kuncevic/rx-service) is a very simple library that wraps [BehaviorSubject](https://stackoverflow.com/a/40231605/415078) and provides utility functions on top of that. Methods like **setState()**, **getState()**, **resetState()** are available to manipulate the state of the [BehaviorSubject](https://stackoverflow.com/a/40231605/415078). The local state exposed via the observable **state$** variable. 

That is how our code now look like using [rx-service](https://github.com/kuncevic/rx-service):

{% gist https://gist.github.com/kuncevic/a8a88a4ddf52226aaf58595c1ed2b39f file=reactive-services-2.ts %}

The benefit of using the [rx-service](https://github.com/kuncevic/rx-service) library is that it abstracts [BehaviorSubject](https://stackoverflow.com/a/40231605/415078) so the code of your services becomes cleaner. Also, it allows you to unify the way you implement reactive services across your applications. So the code you write becomes more maintainable and easier to read.

That is how to consume the **reactive service** within component class:

{% gist https://gist.github.com/kuncevic/a8a88a4ddf52226aaf58595c1ed2b39f file=reactive-services-3.ts %}

You can introduce as many reactive services in your application as you want based on your exact use-case. In the long run, when the size and complexity of your application grow you may decide that you have enough reactive services in your application. Therefore, at this stage you may just replace reactive services with a proper state management solution of your choice. 

---

>_My name is Aliaksei Kuncevič. I am teaching Angular and Web Technology. Helping dev teams to adopt Angular in the most efficient way. GDE, member of the NGXS Core Team._

>_I hope you find this content helpful and if so, please help to spread this article so more people can benefit from it._

>_If you want to learn more Angular tips and tricks join my newsletter at [kuncevic.dev](https://kuncevic.dev?ref=dev)_

>_If you want to know more about Angular subscribe for [Angular Rocks] (https://angularrocks.com/subscribe) podcast_ 🎙

You can find the source code for this article **[here](https://github.com/kuncevic/progressive-state-management-with-ngxs)**