Question

我有各种存储模块，这些模块已导入到主存储模块，并且每个存储模块均向StoreModule.forFeature注册。我也有各种功能模块。我试图延迟加载那些功能模块之一，但是一旦加载，商店就会重置。我不想延迟加载任何存储模块。整个商店是共享的。 NgRx devTools会丢失所有先前的操作，一旦创建了延迟加载的模块，@ngrx/store/init和@ngrx/effects/init就会重新运行。有什么想法可以在加载惰性模块后如何使整个商店保持完整？

---更新---

文件结构

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 {}

...与customers-store.module和其他商店模块相同

store.module

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

功能模块的文件结构

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 { }

header.component.ts（以及整个ui-components模块）在延迟加载的客户组件和仪表板组件之间共享。当我导航至仪表板时，header.component将加载位于AuthStore中的用户信息。当我导航到延迟加载的客户组件时，可以在customersStore中正确检索客户，可以运行auth效果和reducer，但似乎它们在某种程度上处于不同的范围。因此，header.component从不检索用户对象，而customers.component则正确检索了客户集合。在redux devTools中，将清除存储，仅显示源自延迟加载组件的操作。永远不会显示来自公共组件的动作（但是仍然会运行代码）。

Answer 1

您所有的reducer是否都包含一个default案例，该案例仅返回状态？

如果没有，那么这可能是导致问题减少者（如@timdeschryver上面评论的）不返回状态的原因，这似乎是导致此问题的最可能原因。

Answer 2

问题是我将SharedStoreModule导入了其他模块。一旦加载了延迟加载的模块，这会导致生成商店的新实例。我删除了对SharedStoredModule的所有引用，并将其仅保留在appModule级别上，并按预期工作。

加载延迟加载的模块时，NgRx共享存储会重置

2 个答案: