NGRX - Multiple parallel HTTP requests

Question

I have a requirement to write an @Effect() which gets an array as input and dispatches api calls to a REST service - each element should produce a call. I then need to dispatch an action to handle the response. A lot of sites recommend using forkJoin but it seems that it waits for all requests to be finished which is not what i reqiure.

I've tried this (without the effect, just a basic example):

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const arrObservable$ = from(arr);
 arrObservable$
 .pipe(mergeMap(x => this.http.get('https://jsonplaceholder.typicode.com/posts')))
 .subscribe(x => console.log(x));

But i'm not totally sure the requests are in fact dispatching in parallel.

Thanks in advance.

kauppfbi · Accepted Answer · 2018-06-22 11:01:02Z

2

Using forkJoin will trigger parallel XHR, but you will only get a response when the last call has finished. Additionally you have to know that, when one single call fails, you complete stream will fail und you won't get any response, even though 9 out of 10 XHR were successfully.

I would suggest the following: Inside your effect you are dispatching multiple actions (for each rest call one). Then you have one additional effect for each rest call, so that you can handle it asynchronously.

@Effect({ dispatch: false })
fetchData = this.actions
  .ofType(FETCH_DATA)
  .pipe(
    map((action: FetchDataAction) => action.payload ),
    map(payload => {
      // repeat as often you need to
      this.store.dispatch(new FetchDataXYAction(payload));
    })
 );


 @Effect()
 fetchDataXY = this.actions
   .ofType(FETCH_DATA_XY)
   .pipe(
     map((action: FetchDataXYAction) => action.payload),
     switchMap(payload => this.service.loadXY(payload).pipe(
       map(res => new FetchDataxySuccessAction(res))
     ))
   );

answered Jun 22, 2018 at 11:01

kauppfbi

8251 gold badge10 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user1699645 Over a year ago

Thanks for your reply, are there any advantages in your solution as opposed to using mergeMap?

kauppfbi Over a year ago

Switch map will abort a pending call / stream if there is one. So if you have multiple requests in a short interval you will only get the response of the last one.

kauppfbi Over a year ago

Sure whatever you want or need :)

Collectives™ on Stack Overflow

NGRX - Multiple parallel HTTP requests

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related