Using RxJS subjects to switch maps and call another observable

Question

Using RxJS subjects to switch maps and call another observable

Whenever a value is emitted in the subject, I want to call another observable.

The issue I am currently facing is that when the first value is emitted to the subject, it triggers the switchMap and calls the confirmCsvUpload(...) function. However, subsequent values trigger the switchMap but not the confirmCsvUpload(...) function.

I am seeking assistance in understanding why the function is not being called.

// Definition of Subject
private _confirmCsvUpload = new Subject<{ account: Account, previewData: PreviewData[], previewId: string }>();

// Subscription to the Subject 
this._confirmCsvUpload.pipe(
  switchMap(previewData => this._uploadCsvService.confirmCsvUpload(previewData.account, previewData.previewData, previewData.previewId))
).subscribe();

// Function that emits a value to the subject (This is not the function that is called in the switchMap())
confirmCsvUpload(): void {
  this._confirmCsvUpload.next({ account: this.account, previewData: this._previewData, previewId: this.getPreviewIdFromRoute() });
}

javascript angular typescript rxjs

Answer 1

Answer №1

Here is the code snippet that tries to simulate a scenario:

  private _confirm$ = new Subject();
  private _destroy$ = new Subject();
  
  ngOnInit() {
    this._confirm$
      .pipe(
        takeUntil(this._destroy$),
        tap((value) => console.log('[SUB]', value)),
        switchMap((value: any) => this.secondCall())
      )
      .subscribe();
  }

  secondCall() {
    console.log('[SECOND CALL]');
    return of();
  }

  callSub() {
    console.log('[NEXT VALUE]');
    this._confirm$.next('value');
  }

  ngOnDestroy() {
    this._destroy$.next(null);
    this._destroy$.complete();
    console.log('[NG ON DESTROY]');
  }

The console log output for 2 calls would be:

[NEXT VALUE]
[SUB] value
[SECOND CALL]

-- on the second time:

[NEXT VALUE]
[SUB] value
[SECOND CALL]

Answer 2

Here is the code snippet that tries to simulate a scenario:

  private _confirm$ = new Subject();
  private _destroy$ = new Subject();
  
  ngOnInit() {
    this._confirm$
      .pipe(
        takeUntil(this._destroy$),
        tap((value) => console.log('[SUB]', value)),
        switchMap((value: any) => this.secondCall())
      )
      .subscribe();
  }

  secondCall() {
    console.log('[SECOND CALL]');
    return of();
  }

  callSub() {
    console.log('[NEXT VALUE]');
    this._confirm$.next('value');
  }

  ngOnDestroy() {
    this._destroy$.next(null);
    this._destroy$.complete();
    console.log('[NG ON DESTROY]');
  }

The console log output for 2 calls would be:

[NEXT VALUE]
[SUB] value
[SECOND CALL]

-- on the second time:

[NEXT VALUE]
[SUB] value
[SECOND CALL]

Using RxJS subjects to switch maps and call another observable

Answer №1

Similar questions

Guide to creating an Express + TypeScript API using an OpenAPI 3.0 specification

Why Bootstrap 4 collapse feature is not functioning correctly within a ReactJS map component?

Struggling to successfully pass React props.children

Fixing Firebase and React errors in JavaScript functions

Restrict the PHP generated Json response to display only the top 5 results

Highlighting JavaScript code with React Syntax Highlighter exclusively

What is the most effective way to alter the text color using jQuery?

Utilizing Flask to gather information from a leaflet map

What is the best way to choose the final index value in a drop-down menu?

Tips for performing a custom atomic update on a mongodb document

Executing JavaScript files stored on my server using the Node.js command line interface

Learn to save Canvas graphics as an image file with the powerful combination of fabric.js and React

Obtain the text content within a textarea using jQuery

The dropdown consistently shows a value of zero

The function getoffer does not exist

The ngx-translate/core is throwing an error message that says: "HttpClient provider not found!"

Attempting to hash the password led to encountering an error

What could be the reason for Next.js failing to retrieve client-side data following TypeScript validation and submission to the backend?

Using Angularjs to dynamically generate and submit tables

Testing the addition of a dynamic class to an HTML button using Jasmine unit tests