NgRx Effects chargés deux fois

Question

J'ai un module de fonctionnalités simple, qui fournit des services et importe son propre fragment de statistiques en tant que fonctionnalité :

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

Et j'importe ce module dans deux autres modules, une page qui a besoin d'avoir accès aux services, et AppModule car j'ai besoin de l'importer ici pour que l'état soit initialisé correctement.

Lorsque je vérifie Redux DevTools, je peux clairement voir que @ngrx/store/update-reducers est appelé deux fois pour la fonctionnalité alarms. Cela entraîne une stagnation de l'état, stoppant tous les effets (y compris ceux qui ne sont pas liés à la fonctionnalité des alarmes).

Le chronogramme ci-dessous peut montrer le problème (une troisième action @ngrx/store/update-reducers est déclenchée après l'initialisation des effets alors qu'il n'y a que deux fonctionnalités pour le moment, cela contient des réducteurs pour la fonctionnalité 'alarms') :

Comment puis-je éviter que les effets soient chargés deux fois ? J'ai essayé de supprimer le module de AppModule mais cela casse l'état des alarmes car aucun état par défaut n'est fourni pour mes sélecteurs.

Answer 1

Voici mes problèmes :

Après la mise à niveau vers ngrx 8, je n'ai pas supprimé les décorateurs @Effect() des effets que j'ai transitionnés vers createEffect.

J'ai supprimé {dispatch: false} des effets (maintenant en utilisant createEffect) au lieu de les placer en tant que deuxième argument, après la fonction fléchée.

Voir aussi : L'Effet est appelé deux fois lors de l'utilisation de StoreDevtoolsModule.instrument()

Answer 2

Si vous avez besoin d'une partie de l'état dans plusieurs modules, ce n'est évidemment pas un état de fonctionnalité mais l'état principal. Déplacez donc cette partie dans votre module principal et mettez en œuvre des réducteurs/effets pour cela.

Answer 3

Si vous utilisez Angular 6, vous pouvez utiliser la fonctionnalité providedIn: 'root'.

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

Answer 4

Vous obtiendrez également des effets se déclenchant deux fois si vous vous abonnez à l'observable d'effets lui-même, comme en composant des effets à partir d'autres effets (plutôt que des actions qu'ils émettent).

Vous pouvez résoudre ce problème en vous abonnant aux actions émises par les effets, ou vous pouvez également utiliser shareReplay() ou une autre solution observable "chaude" similaire.