Rx Service

Do you want to simplify component communication?

Are you looking for a simple and consistent solution?

Do you like RxJS and service classes?

Component communication and data flow are the main challenges while building single-page applications. The problems can be solved by bringing the state management solution, however in some cases, all you need is just a simple service.

RxJS provides a great solution for that problem. RxJS BehaviorSubject is a perfect way to manage the data flow for applications of small-medium size.

Angular Consulting goes one step further and offers an improved product for Angular developers - Rx Service, a simple library that wraps BehaviorSubject and provides utility functions on top of that.

Methods like setState(), getState(), resetState() are available to manipulate the state of the BehaviorSubject. The local state is exposed via the observable state$ variable.

In case if you call the subscribe() method on an Observable within your component, it's advisable to use the RxCleanup helper service to automatically unsubscribe your observable for you. However, we suggest using the async pipe when possible, which will automatically handle subscriptions and unsubscriptions for you.

Code sample

service

import { Injectable } from "@angular/core"
import { Rx } from "rx-service"
interface Counter {
  value: number
}
const initialState: Counter = { value: 0 }
@Injectable({
  providedIn: "root",
})
export class CounterService extends Rx<Counter> {
  constructor() {
    super(initialState)
  }
}

component class

import { ChangeDetectionStrategy, Component, OnInit } from "@angular/core"
import { Observable } from "rxjs"
import { map } from "rxjs/operators"
import { CounterService } from "./counter.service"
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent implements OnInit {
  counter$!: Observable<number>
  constructor(private service: CounterService) {}
  ngOnInit(): void {
    this.counter$ = this.service.state$.pipe(map((x) => x.value))
  }
  update(value: number): void {
    this.service.setState((state) => ({ value: state.value + value }))
  }
}

component template

<button (click)="update(-1)">-1</button>
<span class="value"> {{ counter$ | async }}</span>
<button (click)="update(1)">+1</button>

const initialState = 0
export class CounterService extends Rx<number> {
  constructor() {
    super(initialState)
  }
}

Clean up subscriptions for edge cases

import { ChangeDetectionStrategy, Component, OnInit } from "@angular/core"
import { RxCleanup } from "rx-service"
import { takeUntil } from "rxjs"
import { CounterService } from "./counter.service"
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent implements OnInit {
  constructor(
    private service: CounterService,
    private readonly cleanup$: RxCleanup
  ) {}
  ngOnInit(): void {
    this.service.state$
      .pipe(
        // more operators here
        takeUntil(this.cleanup$)
      )
      .subscribe((result) => {
        // more magic here
      })
  }
}

GIF VISUALIZATION HERE

Hope you have a good RxService experience!

Install

RxService is fully open sourced. To try the project you may install it following the manual below:

yarn add rx-service

npm i rx-service

Simplify Your Complex Component Communication For Free

Do you have any questions?

Thank you for being our visitor.
Let’s turn your enquiry to solution options.

Discovery Call