RxJS BehaviorSubject allows you to retrieve the current value or obtain a new one depending on a specific condition

Question

RxJS BehaviorSubject allows you to retrieve the current value or obtain a new one depending on a specific condition

I am managing a subject that consumers subscribe to:

private request$: Subject<Service> = new BehaviorSubject(null);

Upon initialization, my components utilize this function:

public service(id: number): Observable<Service> {
    return this.request$
        .pipe(
            switchMap((request) => request && request.serviceId ? of(request) : this.requestById(id)));
}

and make a service call:

private requestById(serviceId: number): Observable<Service> {
    // http call 
}

Various components invoke this function with different ids. I want to update the subject if the incoming id parameter value does not match the current subject's id value.

Is it possible to achieve this? I came across an iif function, but I'm unsure if it's the right fit for me.

Thank you

javascript typescript rxjs

Answer 1

Answer №1

Here are the steps you can take:

public fetchService(id: number): Observable<Service> {
    return this.requests$
        .pipe(
          // Ensures only one evaluation after fetching service
          take(1),
          switchMap((request) => {
            if(request && request.serviceId === id) {
              return of(request);
            } else {
              return this.retrieveRequestById(id) 
                         .pipe(
                           // Assuming the response from retrieveRequestById is an instance of 'Service'; 
                           // Update the subject
                           tap(s => this.subjectRequests$.next(s))
                         );
            }
          })
        );
  }

Answer 2

Here are the steps you can take:

public fetchService(id: number): Observable<Service> {
    return this.requests$
        .pipe(
          // Ensures only one evaluation after fetching service
          take(1),
          switchMap((request) => {
            if(request && request.serviceId === id) {
              return of(request);
            } else {
              return this.retrieveRequestById(id) 
                         .pipe(
                           // Assuming the response from retrieveRequestById is an instance of 'Service'; 
                           // Update the subject
                           tap(s => this.subjectRequests$.next(s))
                         );
            }
          })
        );
  }

RxJS BehaviorSubject allows you to retrieve the current value or obtain a new one depending on a specific condition

Answer №1

Similar questions

Having trouble retrieving data from JSON using JavaScript

How can I use jQuery to target and modify multiple elements simultaneously

Warning: Unhandled Promise Rejection - Alert: Unhandled Promise Rejection Detected - Attention: Deprecation Notice

Revamp your JavaScript code to trigger when the clock strikes bold!

Manipulating arrays of objects using JavaScript

Exploring the chosen choice in the Material Design Lite select box

What is the best way to implement a delay before calling the owlCarousel function?

Error Encountered with Google Authentication in Localhost:3001 - Warning of 'Blocked Access'

Unable to apply programatically loaded attributes to the rangeslider.js plugin

Break up a list into separate paragraphs and style each word using individual CSS

Bootstrap does not show submenus on its navigation menus

"Encountering a Javascript issue while trying to apply a CSS class to a

How can data be transferred from a parent component to a child component using MaterialUI's styling functionality?

Is there a pub/sub framework specifically designed for managing events in Angular?

Ways to ensure your Javascript code only runs based on the specific browser

What is the proper method for utilizing a conditional header in an rtk query?

Melodic Streaming Platform

Retrieve the number of days, hours, and minutes from a given

Troubleshooting Azure typescript function: Entry point for function cannot be determined

Updating Kendo by modifying the Angular model