2

I'm working in and angular 9 app implementing NgRx with lazy load

when the app loads, my state looks like this

enter image description here

and when I navigate to the route '/account-config' the state change becouse I have lazy loaded the module and implemented a StoreModule.forFeature int he imports. Then, my state looks like this

enter image description here

I want to know if there is a way to delete the 'accountconfig' node when I navigate to other route, and put again when I go back to '/account-config'.

these are my routes:

const routes: Routes = [
  {
    path: '',
    component: AppLayoutComponent,
    canActivate: [ AuthGuard ],
    children: [
      { path: 'dashboard',  loadChildren: () => import('./pages/modules/dashboard/dashboard.module').then(m => m.DashboardModule) },
      { path: 'account-config',  loadChildren: () => import('./pages/modules/account-config/account-config.module').then(m => m.AccountConfigModule) },
    ]
  },
  {
    path: '',
    component: AuthLayoutComponent,
    children: [
      { path: 'session',  loadChildren: () => import('./pages/modules/session/session.module').then(m => m.SessionModule) }
    ]
  },
  {
    path: '**',
    redirectTo: 'session/not-found'
  }
];
Sergio Mendez
  • 1,311
  • 8
  • 33
  • 56

1 Answers1

1

I think there is a way, the Store class has a method removeReducer:

removeReducer<Key extends Extract<keyof T, string>>(key: Key) {
  this.reducerManager.removeReducer(key);
}

Each slice of the store is associated with a reducer, so you can get rid of some slices by removing their key.

The Store class also has: addReducer:

  addReducer<State, Actions extends Action = Action>(
    key: string,
    reducer: ActionReducer<State, Actions>
  ) {
    this.reducerManager.addReducer(key, reducer);
  }

So I think you can use store.addReducer(key, reducer) on ngOnInit and store.removeReducer(key) on ngOnDestroy.

Andrei Gătej
  • 11,116
  • 1
  • 14
  • 31