Actions not getting logged in redux dev tools with lazy loaded module's effects

[kingjordan]

Hello

I have all my elf state in a lazy loaded module, as a result I never import effects into the root app module like:

export function initElfDevTools(actions: Actions) {
  return () => {
    devTools({
      name: 'T2 Training Tracker Web App',
      actionsDispatcher: actions,
    });
  };
}

@NgModule({
  imports: [
    EffectsNgModule.forRoot([AuthEffects], { dispatchByDefault: false }),
  ],
  providers: [
    {
      provide: APP_INITIALIZER,
      multi: true,
      useFactory: initElfDevTools,
      deps: [Actions],
    }
  ],
})

I do use the following to register the effects with the lazy state module like:

@NgModule({
  imports: [
    EffectsNgModule.forFeature([AuthEffects])
  ]
})

Everything is working except the redux dev tools is not picking up the actions, but it does show the change to the underlying state which is triggered by the actions and executed by my effects.

actions example:

export interface UserCredentials {
  email: string;
  password: string;
}

export const loginUserAction = createAction(
  '[User] Login',
  props<UserCredentials>()
);

and my effect:

  loginUser$ = createEffect((actions) =>
    actions.pipe(
      ofType(loginUserAction),
      switchMap((credentials) =>
        this.authorize
          .loginWithEmailAndPassword(credentials.email, credentials.password)
          ....
      )
    )
  );

I am looking for some guidance as to why the action is not showing in the redux dev tools

thanks