Performing a series of HTTP requests within a single @ngrx/effect

Question

Performing a series of HTTP requests within a single @ngrx/effect

I need some guidance as I am new to @ngrx and feeling a bit lost in understanding how it should be used.

Let's assume we have an effect named PlaceOrderEffect

In this effect, my goal is to handle each request in a specific order.

processOrder$ = createEffect(
   ofType(OrderActions.PROCESS_ORDER),
   //this part is where I'm struggling
   concatMap([
      this.service.addCrust(),
      this.service.addTopings(),
      this.service.sendToCook()
      this.service.checkOut()
   ]
)

How can I ensure that these operations run sequentially and manage the final response effectively?

angular typescript rxjs ngrx angular12

Answer 1

Answer №1

concatMap is a useful RxJS operator when used with the pipe. It merges the source observable with a new one returned by concatMap, but in your specific case, it may not be necessary.

If your requests are independent of each other, you can achieve the desired outcome by using the RxJS concat function as shown below:

processOrder$ = createEffect(() =>
    this.actions$.pipe(
        ofType(OrderActions.PROCESS_ORDER),
        switchMap(({ payload }) =>
            concat(
                this.service.addCrust(),
                this.service.addToppings(),
                this.service.sendToCook(),
                this.service.checkOut()
            )
        )
    )
);

However, if each request depends on the previous one, you should use the concatMap operator like this:

processOrder$ = createEffect(() =>
    this.actions$.pipe(
        ofType(OrderActions.PROCESS_ORDER),
        concatMap(({ payload }) => this.service.addCrust(payload)),
        concatMap((response1) => this.service.addToppings(response1)),
        concatMap((response2) => this.service.sendToCook(response2)),
        concatMap((response3) => this.service.checkOut(response3))
    )
);

Answer 2

concatMap is a useful RxJS operator when used with the pipe. It merges the source observable with a new one returned by concatMap, but in your specific case, it may not be necessary.

If your requests are independent of each other, you can achieve the desired outcome by using the RxJS concat function as shown below:

processOrder$ = createEffect(() =>
    this.actions$.pipe(
        ofType(OrderActions.PROCESS_ORDER),
        switchMap(({ payload }) =>
            concat(
                this.service.addCrust(),
                this.service.addToppings(),
                this.service.sendToCook(),
                this.service.checkOut()
            )
        )
    )
);

However, if each request depends on the previous one, you should use the concatMap operator like this:

processOrder$ = createEffect(() =>
    this.actions$.pipe(
        ofType(OrderActions.PROCESS_ORDER),
        concatMap(({ payload }) => this.service.addCrust(payload)),
        concatMap((response1) => this.service.addToppings(response1)),
        concatMap((response2) => this.service.sendToCook(response2)),
        concatMap((response3) => this.service.checkOut(response3))
    )
);

Performing a series of HTTP requests within a single @ngrx/effect

Answer №1

Similar questions

Hidden back navigation strategy in AngularJS 2 with location strategy

Initial request in the sequence is a conditional request

The POST requests on Next JS Mock API endpoints include parameters passed in the req.body

Unable to establish a connection with ngModel despite the FormsModule module being successfully imported

Generating dynamic text in Angular based on certain conditions

The function cloneElement does not share any properties with the type Partial<P> and Attributes

Angular 7 automatically updates array values with the most recent values, replacing any previous values in the process

What is the process of transforming two forms into components and then integrating those components into a view in Angular 5?

Collaborating on code between a Typescript React application and a Typescript Express application

The e2e Protractor test is unable to identify the Angular component within a complex Angular router with multiple layers

When a 404 error is thrown in the route handlers of a Next.js app, it fails to display the corresponding 404 page

The metadata version discrepancy has been detected for the module located at C:/xampp/htdocs//node_modules/angular2-flash-messages/module/index.d.ts

Tips for resolving conflicts between sequelize and angular within a lerna monorepo using typescript

Ways to determine the types of props received by a function when the arguments vary for each scenario?

Ensuring Proper Tabulator Width Adjustment Across All Browser Zoom Levels

Encountering challenges while integrating Angular with a Laravel forum creation project

Using a specific type of keys, attempting to set two instances of those keys simultaneously will result in an error of that type

What could be causing the undefined properties of my input variables in Angular?

How to send variables to a function when a value changes in TypeScript and Angular

Avoiding the use of destructuring for undefined values in JavaScript can be achieved by implementing