CODEWITHSUNDEEP
angularangular6ngrx
Michael Kork.
Michael Kork.

Reputation: 343

NgRx shared store resets when loading lazy loaded module

I have various store modules that are imported to the main store module and each store module registers itself with StoreModule.forFeature. I also have various feature modules. I am trying to lazy load one of those feature modules but once it's loaded, the store gets reset. I don't want to lazy load any store modules. The whole store is shared. NgRx devTools lose all the previous actions and @ngrx/store/init and @ngrx/effects/init is re-run once the lazy loaded module is created. Any ideas how to keep the whole store intact once a lazy module is loaded?

--- update ---

file structure

store
 - store.module.ts
 - auth-store
   - actions.ts
   - effects.ts
   - reducer.ts
   - selectors.ts
   - state.ts
   - auth-store.module.ts
 - customers-store
   - ...
   - customers-store.module.ts

auth-store.module.ts

@NgModule({
  imports: [
    CommonModule,
    StoreModule.forFeature('auth', authReducer),
    EffectsModule.forFeature([AuthEffects])
  ],
  providers: [AuthEffects]
})
export class AuthStoreModule {}

... same for customers-store.module and other store modules

store.module

    @NgModule({
      imports: [
       AuthStoreModule,
       CustomersStoreModule,
       ...
       StoreModule.forRoot({}),
       StoreRouterConnectingModule.forRoot({ stateKey: 'router' }),
       EffectsModule.forRoot([])
      ]})
export class StoreModule {}

file structure for feature modules

app
 ui-components
   ....
   - header.component.ts
   - ui-components.module.ts
 dashboard
   .... 
   - dashboard.module.ts
 customers (lazy loaded)
   ....
   - customers-routing.module.ts
   - customers.module.ts
 router
   ....
  - router.module.ts

customers-routing.module.ts

const routes: Routes = [ ... ]
@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class CustomersRoutingModule { }

customers.module.ts

@NgModule({
  imports: [
  .... ,
  CustomersRoutingModule
]})
export class CustomersModule { }

router.module.ts

const routes: Routes = [ 
  {
    path: '',
    loadChildren: '../customers/customers.module#CustomersModule'
  },
 {
   path: '',
   redirectTo: '/dashboard',
   pathMatch: 'full'
 },
  ....
 ]
@NgModule({
  imports: [
    StoreModule,
    RouterModule.forRoot(routes, {
      useHash: false
    })
  ],
  exports: [
    RouterModule
  ]
})
export class AppRouterModule { }

The header.component.ts (and the whole ui-components module) is shared among the lazy loaded customers component and the dashboard component. When I navigate to dashboard the header.component loads the user information located in AuthStore. When I navigate to the lazy-loaded customers component the customers are retrieved correctly in the customersStore, the auth effects and reducers run but it seems they are on a different scope somehow. Thus the header.component never retrieves the user object but the customers.component retrieves the customers collection correctly. In redux devTools the store is cleared and only the actions that originate from the lazy-loaded component are shown. The actions from the common component are never shown (but the code is run nonetheless).

Upvotes: 4

Views: 2263

Answers (2)

Michael Kork.
Michael Kork.

Reputation: 343

The problem was that I imported my SharedStoreModule to the other modules. This caused the to spawn a new instance of the store once the lazy-loaded module was loaded. I removed all references to the SharedStoredModule and kept it only at the appModule level and works as expected.

Upvotes: 3

Zyzle
Zyzle

Reputation: 2280

Do all of your reducers contain a default case that simply returns the state?

If not then this might the the cause of your problem reducers that are called not returning state as @timdeschryver commented above sound like the most likely cause of this issue.

Upvotes: 0

Related Questions