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

Change a nullable string property within an interface to a non-nullable string property

What are the potential drawbacks of using this alternative method instead of `useCallback` in React to prevent unnecessary re-renders of children components?

Guidelines for Organizing Angular Interface Files and Implementing Custom Type Guards

Is it possible for an object to receive notifications when a component object undergoes changes in Angular 2/4?

Assign variable data to properties within an immutable object within a React component

What's causing the malfunction of Angular subscriptions when switching between tabs?

What are the recommended methods for ensuring compatibility of enums in Typescript?

Imitating elegant angular input styles

The Angular 2 dropdown menu isn't populating because of the sluggish http response

What is preventing the CKEditor 4 Angular module from properly validating form fields?

Using conditional styles with Angular 2

Using NavParams within a service component,

Is it possible to store all data in the Redux store while using Angular?

Angular routing is giving me trouble when trying to open various menus at the same location

`Why isn't GetServerSideProps being triggered for a nested page in Next.js when using Typescript?

Getting and passing data from a frontend form to Java, then displaying it back in the frontend through Angular

Detecting changes in an ondrop event triggered by a modification in object property

Arranging a dictionary by its keys using Ramda

What is the method for retrieving the name of an object's property within an Angular template

Detecting incorrect serialized data entries based on data types