Browser endless loop and crash on @Effect

[felixunivers]

If by accident I placed the same Action (.Load in my case) in my Effect in the ofType filter and then in the map of my service result Observable and run the project, my browser gets into endless loop with fast increasing number of errors. The systems stalls, browser must be killed to terminate the trouble.

If I fix the error and replace: .Load with the intended: .Loaded, all is fine. The code runs.

The issue is in the bug handling of the erroneous entry. I am assuming this is an unexpected behavior and should be addressed with revised bug handling.

Here is my Effect example. (Let me know if you need other pieces of the code).

@Injectable()
export class FetchMenuDataEffects {

  constructor(private actions$: Actions<Menu01Actions>,
              private menuDataService: MenuDataService) {}

  @Effect()
  loadMenuItems$ = this.actions$
    .pipe(
      ofType(Menu01ActionTypes.Load),                                   // <<< same action: .Load
      mergeMap(() => this.menuDataService.getMenuItemsFromLocalDataSource()
        .pipe(
          map(menuItems =>
// (tested: menuItems  returns accurate result from the service above)
// >>> here is the error:   .Load  ( - should be:  .Loaded )
                ({ type: Menu01ActionTypes.Load, payload: menuItems })  // <<< same action: .Load
             ),
          catchError(() => EMPTY)
        ))
      );
}
``