NgRx Effects loaded twice

Question

I have a simple feature module, which provides services and imports its own stats fragment as a feature:

@NgModule({
  imports: [
    CommonModule,
    StoreModule.forFeature('alarms', alarmsReducer, { initialState: alarmsInitialState }),
    EffectsModule.forFeature([AlarmsEffects])
  ],
  declarations: [],
  providers: [
    AlarmsFacade,
    AlarmsService
  ]
})
export class AlarmsModule {
}

And I'm importing this module in two other modules, a page that needs to have access to the services, and AppModule as I need to import it here in order to have the state initialized properly.

When I'm checking Redux DevTools, I can clearly see that @ngrx/store/update-reducers is called twice for the feature alarms. This results in the state being frozen, stoping all the effects (including the ones not related to alarms feature).

The timeline below can show the issue (a third @ngrx/store/update-reducers action is fired after the effects init while there's only two features at the moment, it contains reducers for feature 'alarms'):

How can I avoid the effects to be loaded twice? I tried to remove the module from AppModule but it's breaking the alarms state as there's no default one provided for my selectors.

Answer 1

Here were my issues:

After upgrading to ngrx 8, I didn't remove the @Effect() decorators from the effects I've transitioned to createEffect.

I removed {dispatch: false} from the effects (now using createEffect) instead of placing them as the second argument, after the arrow function.

Also see: Effect gets called twice when using StoreDevtoolsModule.instrument()

Answer 2

If you need some slice of the state in multiple modules then its obviously not a feature state but the main state. So move that slice into your main module and implement reducers/effects for it there.

Answer 3

If you are using angular 6 you can do the provideInRoot feature.

@Injectable({
    providedIn: 'root'
})
export class MyEffects {

Answer 4

You'll also get effects firing twice if you subscribe to the effect observable itself, like by composing effects out of other effects (rather than the actions they dispatch).

You can solve it by subscribing to the actions the effects dispatch, or you can also use shareReplay() or other similar "hot" observable solution.