Effect is not calling success action and making multiple requests to service

Question

I'm trying to create simple Action using Ngrx. I have declared action type:

export enum DashboardActionTypes {
  LOAD_TAG_KEY_LIST = '[Dashboard] Load tag key list',
  LOAD_TAG_KEY_LIST_SUCCESS = '[Dashboard] Load tag key list',
  LOAD_TAG_KEY_LIST_FAILURE = '[Dashboard] Load tag key list'
}

after that classes responsible for that actions:

export class LoadTagKeyList implements Action {
  readonly type: string = DashboardActionTypes.LOAD_TAG_KEY_LIST;
}

export class LoadTagKeyListSuccess implements Action {
  readonly type: string = DashboardActionTypes.LOAD_TAG_KEY_LIST_SUCCESS;
  constructor(public payload: string[]) {}
}

export class LoadTagKeyListFailure implements Action {
  readonly type: string = DashboardActionTypes.LOAD_TAG_KEY_LIST_FAILURE;
}

with:

export type DashboardActions =
  | LoadTagKeyList
  | LoadTagKeyListSuccess
  | LoadTagKeyListFailure;

for that I have one Effect:

@Effect()
loadTagKeyList$: Observable<Action> = this.actions$.pipe(
    ofType(fromDashboard.DashboardActionTypes.LOAD_TAG_KEY_LIST),
    switchMap((action: fromDashboard.LoadTagKeyList) => {
      return this.dashboardService.loadTagKeyList().pipe(
        map(
          (response: string[]) => new fromDashboard.LoadTagKeyListSuccess(response)
        ),
        catchError(() => {
          return of(new fromDashboard.LoadTagKeyListFailure());
        })
      );
    })
  );

Method called from the service is a GET method returning array of string.

The problem is that the Success method is never called despite of the fact that the response from the service is valid, and not null. Second thing is that the LOAD_TAG_KEY_LIST action is running many times in a loop despite the fact that it's called only once

this.storeDashboard.dispatch(new fromDashboardActions.LoadTagKeyList());

Answer 1

Your action types should have a different name.

export enum DashboardActionTypes {
  LOAD_TAG_KEY_LIST = '[Dashboard] Load tag key list',
  LOAD_TAG_KEY_LIST_SUCCESS = '[Dashboard] Load tag key list SUCCESS',
  LOAD_TAG_KEY_LIST_FAILURE = '[Dashboard] Load tag key list FAILURE'
}

This is something that ngrx-tslint-rules will catch. Or NgRx version 9.2 (with the creator actions) can be configured to throw a runtime error in these cases.