1

My question is quite similar to this one : Angular 7, Ngrx, Rxjs 6 - Accessing state between lazy loaded modules

Having an angular root module (AppModule) that wants to be notified if an action occurred in a lazy-loaded submodule (an AuthModule that dispatch a CONNECTED action), so that it can update its own shell ui (hiding some nav actions...)

How can AppModule reducer have access to actions and selectors declared in AuthModule, since there shouldn't be a static dependency between these both modules ? (lazy-loading)

Since NgRx encourages using createFeature that declares reducers and selectors in a single file of a submodule, there should be a way for the parent module to reference those actions.

The only way I see so far, is by creating a third module, that store auth actions, reducer and selectors, and reference it from both AppModule and AuthModule. But this might create a bunch of new modules just for some technical reasons..

Do you know a better setup ?

djflex68
  • 21
  • 4

2 Answers2

0

A feature state is not decoupled but is just a child property of the app (root) state having the featureName as key.

If your auth feature has the featureName auth, you could access it via this.store.select(state => state.auth).

You should inject the store with Store<any> to avoid complications with the TypeScript compiler.

If you need access to selectors and actions of a lazy loaded module, then I would do as you suggested: Extract the ngrx related stuff into a third (shared) module. Both app module and auth module would then depend on it.

rainerhahnekamp
  • 1,087
  • 12
  • 27
0

This is called "shared or root state" - if two or more modules, lazy-loaded or not, require to share state, that state should be extracted from the modules and placed at the root/shared state.

Eddie Paz
  • 2,219
  • 16
  • 11