angular and ngrx : can you dispatch an action in a loop?

Question

I have defined an effect that calls an api that deletes a file with a certain uuid in the server:

@Effect()
  deleteFileImport$: Observable<Action> = this.actions$.pipe(
    ofType(actions.runs.DELETE_FILE_IMPORT),
    map((action: any) => action.payload),
    switchMap((fileImport: FileImport) =>
      this.rest.del(fileImportUrl + fileImport.uuid + '/').pipe(
        map((response: FileImport) => new actions.runs.DeleteFileImportSuccess(response)),
        catchError((err: HttpErrorResponse) => {
          console.log('DELETE_FILE_IMPORT error', err);
          return observableOf(new NotificationAction({
              title: 'File Import Delete Failed',
              body: 'Failed to delete file import: ' + fileImport.filename
            })
          );
        })
      )
    )
  );

if I call this effect in a loop:

importFilesToDelete.forEach(file => {
      this.store.dispatch(new actions.runs.DeleteFileImport(file));
    });

only the first one get deleted. If I track the calls to dispatch I can see that all file are processed with the correct parameters passed but only the first action is executed. Am I missing something in the way ngrx works? Can you dispatch actions in a loop?

Answer 1

The problem here is the switchMap operator which will cancel pending requests. Use the concatMap if the order is important or the mergeMap operator if the order of executing is not important.