Avoid passing the observable to return values from the service layer to the component

Question

Avoid passing the observable to return values from the service layer to the component

I am currently attempting to pass the outcome of a service layer with regard to components.

The service that connects with the API:

 public getPerfilNew$(): Observable<PerfilInvestidor> {
            return this.http.get<PerfilInvestidor>(`${environment.api.basePosicaoConsolidada}/consolidado`)
              .pipe(
                map(res => res),
                shareReplay(1),
                catchError(err => {
                    console.log('Error in perfil', err);
                    return throwError(err);
                })
            )
        }

public getPositionConsolidated(): Observable<PosicaoConsolidada> {
    return this.http.get<PosicaoConsolidada>(`${environment.api.basePosicaoConsolidada}/consolidado`)
      .pipe(
        map(res => res),
        shareReplay(1),
        catchError(err => {
            console.log('Error investiments', err);
            return throwError(err);
        })
    )
}

In my component, I attempted the following:

public loadData() {
        // Determine if the profile retrieval failed or not
        this.homeGuardService.getPerfilNew$.pipe(
            takeUntil(this.unsubscribe) 
        ).subscribe(res => {
            this.perfilInvestidor = res;
            this.perfilFailed = this.perfilInvestidor.status ? true : false;
            console.log('perfil is failed --->', this.perfilFailed)
        })

        // Checking for investments
        this.homeGuardService.getPositionConsolidated().subscribe(res => {
            this.positionConsolidated = res
            if (this.positionConsolidated) {
                this.investments = true
            }
        });

        this.isEverthingFailed = !this.investments && this.perfilFailed
}

I need to subscribe external values and match them into my variable isEverythingFailed. Should I use Subject? BehaviorSubject? Because in this way, the variables investments and perfilFailed are undefined.

With this number of observables, am I compromising memory usage? Open to suggestions.

javascript angular typescript rxjs

Answer 1

Answer №1

One way to retrieve data from multiple streams and subscribe to them is by using either forkJoin or combineLatest:

public fetchData() {
  forkJoin([this.userService.getUserDetails$(), this.userService.getAccountInfo()])
    .subscribe(([userDetails, accountInfo]) => {
        this.user = userDetails;
        this.userFailed = this.user.status ? true : false;
        console.log('User failed status --->', this.userFailed)
        this.accountInformation = accountInfo
        if (this.accountInformation) {
            this.accountsLoaded = true
        }
        this.isAllFailed = !this.accountsLoaded && this.userFailed
    })
  )
}

Answer 2

One way to retrieve data from multiple streams and subscribe to them is by using either forkJoin or combineLatest:

public fetchData() {
  forkJoin([this.userService.getUserDetails$(), this.userService.getAccountInfo()])
    .subscribe(([userDetails, accountInfo]) => {
        this.user = userDetails;
        this.userFailed = this.user.status ? true : false;
        console.log('User failed status --->', this.userFailed)
        this.accountInformation = accountInfo
        if (this.accountInformation) {
            this.accountsLoaded = true
        }
        this.isAllFailed = !this.accountsLoaded && this.userFailed
    })
  )
}

Answer 3

Answer №2

1. Insights

Upon initial inspection, it appears that there may be a race condition occurring in the code provided. It is crucial to understand how Subject operates in this context:

When you create a new Subject and immediately call next() on it without any subscribers attached, the emitted value will not be preserved.

const sub = new Subject();
sub.next(1);

// Subscribing here won't trigger anything
   sub.subscribe(a => console.log(a))
// This is because Subject does not retain previous values

However, if you subscribe before emitting a value like so:

const sub = new Subject();

// Subscribe first:
sub.subscribe(a => console.log(a))

sub.next(1);

// Now you will see the value printed in the console as expected.

In your specific case, it seems like you are subscribing to a subject after it has already emitted values.

Additionally:

 this.perfilClient$.subscribe(res => {

You are subscribing to perfilClient$, but it's unclear where values are being emitted into that stream?

If you struggle to coordinate subscriptions with emissions from a Subject, consider using ReplaySubject or BehaviorSubject for better synchronization.

2. Considerations

Your implementation involves a limited number of observables, but there are some common pitfalls such as:

Nesting subscriptions within each other
Having empty subscription callback functions etc..

In RXJs, it is important to minimize side effects wherever possible to ensure a more streamlined and predictable flow of data.

Answer 4

1. Insights

Upon initial inspection, it appears that there may be a race condition occurring in the code provided. It is crucial to understand how Subject operates in this context:

When you create a new Subject and immediately call next() on it without any subscribers attached, the emitted value will not be preserved.

const sub = new Subject();
sub.next(1);

// Subscribing here won't trigger anything
   sub.subscribe(a => console.log(a))
// This is because Subject does not retain previous values

However, if you subscribe before emitting a value like so:

const sub = new Subject();

// Subscribe first:
sub.subscribe(a => console.log(a))

sub.next(1);

// Now you will see the value printed in the console as expected.

In your specific case, it seems like you are subscribing to a subject after it has already emitted values.

Additionally:

 this.perfilClient$.subscribe(res => {

You are subscribing to perfilClient$, but it's unclear where values are being emitted into that stream?

If you struggle to coordinate subscriptions with emissions from a Subject, consider using ReplaySubject or BehaviorSubject for better synchronization.

2. Considerations

Your implementation involves a limited number of observables, but there are some common pitfalls such as:

Nesting subscriptions within each other
Having empty subscription callback functions etc..

In RXJs, it is important to minimize side effects wherever possible to ensure a more streamlined and predictable flow of data.

Avoid passing the observable to return values from the service layer to the component

Answer №1

Answer №2

Similar questions

Navigating the world of date pickers: a deceptively easy challenge

Tips for implementing a client-side event when an asp:menu item is clicked

The error message UnhandledPromiseRejectionWarning is triggered due to a TypeError stating that the function authenticate is

Develop a directive for transforming data

Utilizing babel-plugin-root-import in conjunction with babel 7

What is the purpose of specifying the props type when providing a generic type to a React functional component?

Troubles with Geocoding functionality on Google Maps integration within Wordpress

Exploring the basics of Three.js: a step-by-step guide using a shadertoy example on transforming patterns with objects

Generating a JSON file using JavaScript amidst the presence of unconventional characters in JSON keys

What is the best way to organize products based on the proximity of users using MongoDB's Geospatial Queries

Creating a MongoDB query using Mongoose to simulate JavaScript filtering operations (including filter and every) for searching with multiple terms

Transform JSON data into an HTML layout

Blender Mesh Not Visible in Three.js

Angular 2 displayed a vibrant HTML page component

Changing the URL parameters to accommodate a specific query

Interacting with a form in Node.js does not print out the form values to the

Display only the offcanvas button

Tips for migrating an AngularJS application to Angular

What is the snapping feature of the jQuery Mobile slider?

Display a Carousel in Angular4 based on the selected value from a dropdown