How can we simultaneously execute multiple HTTP requests in Angular 6 by leveraging the power of forkJoin and ngrx?

Question

How can we simultaneously execute multiple HTTP requests in Angular 6 by leveraging the power of forkJoin and ngrx?

Current Situation

In the realm of my angular6 application, I find myself juggling three distinct categories: catA, catB, and catC. Each of these categories requires data retrieval from 3 separate APIs. Upon selecting any category, the CategoryDetailsComponent is loaded, triggering the dispatching of an action (LoadCategoryDetails).

To tackle this, I have incorporated the utilization of forkJoin to handle parallel API calls within the service, coupled with a resolver to ensure that all calls are completed before loading the component.

Anomaly

Upon selecting catA (or after a page reload), the categoryNames array appears empty.
Selecting catB (following the second routing) displays the previous category's list (catA) in the CategoryNames array.

The discrepancy may arise due to a delay in one of the API calls, possibly indicating improper configuration of the resolver.

Query

How can the effects and resolver be configured effectively?

What is the best approach to implement forkJoin for multiple API calls and forward the retrieved data to the component?

Code Analysis

Execute action dispatch and subscribe to selector

ngOnInit() {
    const id = parseInt(this.route.snapshot.paramMap.get('categoryId'), 10);
    this.store.dispatch(new fromCategory.LoadCategoryDetails(id));

    this.store.select(getCategoryDetails)
              .subscribe((data) => {
                this.categoryDetails = data[0];
                this.journeys = data[1];
                this.categories = data[2];
              });

    // extract only category name
    // issue alert
    this.categories.forEach( category => {
      this.categoryNames.push(category.name);
    });
}

Effects setup (track action triggers and invoke service)

@Effect()
loadCategoryDetails$ = this.actions$.pipe(
    ofType<fromCategory.LoadCategoryDetails>(CategoryActionTypes.LoadCategoryDetails),
    switchMap((action) => {
    return this.categoryService.getCategoryDetails(action.payload).pipe(
        map(data => new fromCategory.LoadCategoryDetailsSuccess(data))
    );
    })
);

Service function orchestrating multiple calls using forkJoin

import { forkJoin } from 'rxjs';

getCategoryDetails(categoryId) {
    const categoryDetails = this.http.get(url);
    const journeys = this.http.get(url);
    const courses = this.http.get(url);

    return forkJoin([categoryDetails, journeys, courses]);
}

Resolver functionality implementation

export class CategoryDetailsResolver implements Resolve<any> {

    constructor(
        private categoryService: CategoryService,
        private router: Router) {}

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        const categoryId = route.paramMap.get('categoryId');
        return this.categoryService.getCategoryDetails(categoryId);
    }
}

Your insights are greatly appreciated.

angular rxjs angular6 rxjs6 ngrx-effects

Answer 1

Answer №1

Try revising your code to eliminate the use of route.snapshot and check if that resolves the issue.

ngOnInit() {
this.route.data.subscribe((data) => {

if(data) {
 this.store.dispatch(new fromCategory.LoadCategoryDetails(data.id));

 this.store.select(getCategoryDetails)
          .subscribe((data) => {
            this.categoryDetails = data[0];
            this.journeys = data[1];
            this.categories = data[2];

 this.categories.forEach( category => {
  this.categoryNames.push(category.name);
  });
});

}

});

}

Answer 2

Try revising your code to eliminate the use of route.snapshot and check if that resolves the issue.

ngOnInit() {
this.route.data.subscribe((data) => {

if(data) {
 this.store.dispatch(new fromCategory.LoadCategoryDetails(data.id));

 this.store.select(getCategoryDetails)
          .subscribe((data) => {
            this.categoryDetails = data[0];
            this.journeys = data[1];
            this.categories = data[2];

 this.categories.forEach( category => {
  this.categoryNames.push(category.name);
  });
});

}

});

}

Answer 3

Answer №2

It seems like your implementation of forkjoin is on the right track. However, there is a potential issue in your code where you are iterating through the categories outside of the getCategoryDetails callback. This could lead to problems due to the asynchronous nature of the operation. To ensure that you have access to the categories before iterating through them, it's recommended to move the iteration code inside the successful callback function.

ngOnInit() {
    const id = parseInt(this.route.snapshot.paramMap.get('categoryId'), 10);
    this.store.dispatch(new fromCategory.LoadCategoryDetails(id));

    this.store.select(getCategoryDetails)
              .subscribe((data) => {
                this.categoryDetails = data[0];
                this.journeys = data[1];
                this.categories = data[2];

this.categories.forEach( category => {
      this.categoryNames.push(category.name);
    });
              });

    // Ensure that category names are only filtered after successful retrieval
    // problem

}

Answer 4

It seems like your implementation of forkjoin is on the right track. However, there is a potential issue in your code where you are iterating through the categories outside of the getCategoryDetails callback. This could lead to problems due to the asynchronous nature of the operation. To ensure that you have access to the categories before iterating through them, it's recommended to move the iteration code inside the successful callback function.

ngOnInit() {
    const id = parseInt(this.route.snapshot.paramMap.get('categoryId'), 10);
    this.store.dispatch(new fromCategory.LoadCategoryDetails(id));

    this.store.select(getCategoryDetails)
              .subscribe((data) => {
                this.categoryDetails = data[0];
                this.journeys = data[1];
                this.categories = data[2];

this.categories.forEach( category => {
      this.categoryNames.push(category.name);
    });
              });

    // Ensure that category names are only filtered after successful retrieval
    // problem

}

How can we simultaneously execute multiple HTTP requests in Angular 6 by leveraging the power of forkJoin and ngrx?

Current Situation

Anomaly

Query

Code Analysis

Answer №1

Answer №2

Similar questions

Leveraging async-await for carrying out a task following the deletion of a collection from a mongodb database

What is the best way to implement individual error handling for each function within combineLatest?

Can you please verify the most recent updates for Bootstrap and Syncfusion in my Angular project?

Is it possible to create a click event for a mat-icon within a mat form field (either in the matprefix or matsuffix)?

Using currency symbols in Angular 2

How to exit a dialog in an Angular TypeScript component with precision

Has anyone tried integrating Reveal JS with Angular 8?

Unlock the Full Potential of TypeScript: Seamless Export of Classes and Functions

Injecting Window into Angular 2.1.0: A Step-by-Step Guide

What is the reason behind Angular 6 producing my service inside the directory "e2e/app"?

What is the best way to ensure a specific row remains at the bottom of an Angular table with Material when sorting?

Subject.next() not triggering Observable on value change

Differentiating body classes in Angular 5

When clicking, clear the selected items and avoid the function from repeatedly executing

I need a way to call a function in my Typescript code that will update the total value

Ways to specify certain columns for presentation in Angular Material Table

Can multi-page applications be developed using Angular?

A guide on using hyperlinks to scroll to a targeted position in an Angular application

Using electron cookies in Angular involves integrating Electron's native cookie functionality into an

It is not possible to bind an attribute to an element that already has a Bootstrap class applied to it