Race Condition

A set of tools to avoid race conditions in RxJS subscriptions.

About The Project

The usual way to avoid race conditions in RxJS is to use switchMap.

import { HttpCLient, Params } from '...';
import { Subject, switchMap } from 'rxjs';

class TestClass {
  private load$ = new Subject<Params>();

  constructor(protected readonly http: HttpCLient) {
    this._watchLoad$();
  }

  private _watchLoad$() {
    this.load$.pipe(switchMap((params) => this.http.get('path', { params }))).subscribe();
  }

  load(params: Params) {
    this.load$.next(params);
  }
}

This method is quite cumbersome and doesn't prevent unnecessary calls. This library allows to manage this problem in a simpler way, avoiding unnecessary calls.

Getting Started

Installation

Using NPM

npm install --save @kuoki/race-condition

Using Yarn

yarn add @kuoki/race-condition

Dependencies

• rxjs >= 6.0.0

Usage

RaceConditionFreeSubscription

add

import { HttpCLient, Params } from '...';
import { RaceConditionFreeSubscription } from '@kuoki/race-condition';

class TestClass {
  protected subscriptions = new RaceConditionFreeSubscription();

  constructor(protected readonly http: HttpCLient) {}

  noSafeLoad(params: Params) {
    this.http.get('path', { params }).subscribe();
  }

  load(params: Params) {
    const _load = () => this.http.get('path', { params }).subscribe();
    this.subscriptions.add('load', _load, params);
  }
}

This class is very useful when calling functions that return an Observable with arguments, mainly avoiding memory leaks and race conditions due to slow loads.

noSafeLoad({ a: '0' }); // ----------(a|)
noSafeLoad({ a: '1' }); //   ^--(a|)

In this example, the user wants to display the data filtering by { a: 0 }, but right after filter again by using { a: 1 }. The second call resolves faster, so it is displayed first, but when the first call resolves it replaces the values ​​that were displayed with its own, and obviously these are not the results that the user expected to get. Using this method we solve this problem through the following behavior:

• If the call is repeated with the same arguments and the previous subscription has not completed, ignores the new call and continue using the old subscription.

load({ a: '0' }); // -----(a|)
load({ a: '0' }); //   ^

• If the call is repeated with other arguments and the previous subscription has not completed, it completes it and replaces it with the new subscription.

load({ a: '0' }); // --|
load({ a: '1' }); //   ^----(a|)

• If the call is repeated and the subscription is complete, a new subscription is created.

load({ a: '0' }); // -----(a|)
load({ a: '0' }); //            ^----(a|)

get

this.subscriptions.get('load'); // 'load' Subscription
this.subscriptions.get('noKey'); // undefined

unsubscribe

this.subscriptions.unsubscribe('load'); // unsubscribes 'load' Subscription
this.subscriptions.unsubscribe(); // unsubscribes all subscriptions

@RaceConditionFree()

This decorator allows you to simplify the way you handle race conditions by applying it in a method that returns a subscription. This also allows for cleaner code and to use other common decorators like @debounce.

import { HttpCLient, Params } from '...';
import { RaceConditionFree } from '@kuoki/race-condition';
import { Subscription } from 'rxjs';

class TestClass {
  constructor(protected readonly http: HttpCLient) {}

  @RaceConditionFree()
  load(params: Params): Subscription {
    return this.http.get('path', { params }).subscribe();
  }
}