Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

564
Views
Multiple Http calls in one @ngrx/effect

I am very confused, and new to @ngrx so please forgive me for not understanding how this is supposed to work.

Let's say I have an effect that is called PlaceOrderEffect

In this effect, I want to process each request in order.

processOrder$ = createEffect(
   ofType(OrderActions.PROCESS_ORDER),
   //here is where i get confused
   concatMap([
      this.service.addCrust(),
      this.service.addTopings(),
      this.service.sendToCook()
      this.service.checkOut()
   ]
)

How can I run these in sequential order and handle the final response?

over 4 years ago · Santiago Trujillo
1 answers
Answer question

0

concatMap is RxJS operator to be used with pipe, to merge the source observable with the new one returned by concatMap, which is not your case.

I think you can use RxJS concat function to achieve what you're trying to do if the requests don't depend on each other, like the following:

processOrder$ = createEffect(() =>
    this.actions$.pipe(
        ofType(OrderActions.PROCESS_ORDER),
        // here you need to switch and map to the new observable (concat one) returned by switchMapTo operator
        switchMap(({ payload }) =>
            concat(
                this.service.addCrust(),
                this.service.addTopings(),
                this.service.sendToCook(),
                this.service.checkOut()
            )
        )
    )
);

But if each request depends on the previous one, you can use concatMap operator like the following:

processOrder$ = createEffect(() =>
    this.actions$.pipe(
        ofType(OrderActions.PROCESS_ORDER),
        concatMap(({ payload }) => this.service.addCrust(payload)),
        concatMap((response1) => this.service.addTopings(response1)),
        concatMap((response2) => this.service.sendToCook(response2)),
        concatMap((response3) => this.service.checkOut(response3))
    )
);
over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!