Add a value in front of switchMap along with a Promise

Question

Add a value in front of switchMap along with a Promise

Whenever a new value is emitted by this.selectedLanguage$, I need to emit a value that is calculated asynchronously. My current approach to this requirement involves the following code:

public readonly languageCategories$ = this.selectedLanguage$.pipe(
  switchMap(x => this._matchService.getCategoriesAsync(x)),
  shareReplay());

I opted for using switchMap due to the fact that if the selectedLanguage changes during category retrieval, any ongoing async call should be abandoned in favor of starting a fresh one.

The issue lies in the fact that everytime the asynchronous method begins execution, I would like languageCategories to emit a value of null (indicating that categories are being computed, as an empty array might be misleading).
Is there a way to accomplish this?

Your assistance is greatly appreciated!

javascript typescript rxjs reactive-programming reactive

Answer 1

Answer №1

Let's discuss a potential approach:

languageCategories$ = this.selectedLanguage$.pipe(
  switchMap(
    x => merge(
      of(null), // Emit `null` immediately to indicate loading
      this._matchService.getCategoriesAsync(x),
    )
  ),

  // Considering the use of shareReplay() - uncertain about necessity
);

The usage of shareReplay is questioned here because it may cache the emitted null values (which represent the start of an asynchronous operation for loading). To handle this, you could modify the process like this:

languageCategories$ = this.selectedLanguage$.pipe(
  switchMap(
    x => merge(
      of(null),
      this._matchService.getCategoriesAsync(x),
    )
  ),
  tap(v => v === null && doSideEffect()),
  filter(v => !!v),
  shareReplay()
);

Additionally, note that configurations can be added to the shareReplay operator:

shareReplay({ bufferSize, windowTime, scheduler, refCount })

. Here's what each parameter signifies:

bufferSize - the number of values to be cached, discarding the oldest value if exceeded
windowTime - duration for which values should be stored
scheduler - option to specify a custom scheduler
refCount - determines if the ReplaySubject should be destroyed when no active subscribers are present

Answer 2

Let's discuss a potential approach:

languageCategories$ = this.selectedLanguage$.pipe(
  switchMap(
    x => merge(
      of(null), // Emit `null` immediately to indicate loading
      this._matchService.getCategoriesAsync(x),
    )
  ),

  // Considering the use of shareReplay() - uncertain about necessity
);

The usage of shareReplay is questioned here because it may cache the emitted null values (which represent the start of an asynchronous operation for loading). To handle this, you could modify the process like this:

languageCategories$ = this.selectedLanguage$.pipe(
  switchMap(
    x => merge(
      of(null),
      this._matchService.getCategoriesAsync(x),
    )
  ),
  tap(v => v === null && doSideEffect()),
  filter(v => !!v),
  shareReplay()
);

Additionally, note that configurations can be added to the shareReplay operator:

shareReplay({ bufferSize, windowTime, scheduler, refCount })

. Here's what each parameter signifies:

bufferSize - the number of values to be cached, discarding the oldest value if exceeded
windowTime - duration for which values should be stored
scheduler - option to specify a custom scheduler
refCount - determines if the ReplaySubject should be destroyed when no active subscribers are present

Add a value in front of switchMap along with a Promise

Answer №1

Similar questions

How can I dynamically apply an active class when clicking on a group of buttons?

The issue arises when the cache code in jQuery Ajax interferes with the callback function, causing it to

I am currently working on creating a system for displaying rating stars for products. The rating value, which ranges from 0 to 5, has already been provided

Ways to stop a JavaScript function from running during page loading

Utilize Node.js and Cheerio to extract data from an HTML table

Implementing Ideone API functionality on Codeigniter with the use of ajax, javascript, and soapclient

Calculator for calculating values using JavaScript data attributes

Transforming a unirest 'GET' call into an axios request

Limit Range of jQuery UI Slider Button

Angular 2 dropdown list that allows users to add a personalized value in the HTML code

Apps hosted on Heroku are restricted from accessing CORS, even within the platform's domain

Using Angular to send data to a WCF JSON endpoint

What could be causing my select tags to appear incorrectly in Firefox and IE?

What is the method for tallying CSS page breaks in printed HTML documents?

Can we leverage map/filter/reduce functions within a promise by encapsulating the result with Promise.resolve()?

Encountering Issue: Exceeding the number of hooks rendered in the previous render cycle

Typescript error: The property 'set' is not found on type '{}'

What is the best way to halt a jQuery function when hovering over it?

What causes a stack trace to be logged alongside a rejected Promise in Node version 7.2.0?

Discover the Elements that have been incorporated through the use of JavaScript