带有延迟加载模块的Ngrx

Question

假设在我的应用程序中，我具有以下延迟加载模块：

• 登录模块
• 管理模块

App-routing.module.ts `

const routes: Routes = [
  { path: 'login', loadChildren: () => import('./login/login.module').then(m => m.LoginModule) },
  { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule), canLoad: [AdminGuard]}]

`

在LoginModule中，我创建了StoreModule.forFeature('login', fromLogin.authReducer)。

成功登录后，程序将重定向到管理页面（模块）。

而商店正在调度新动作：this.store.dispatch(login({some object})); 一切正常。

---

问题

当我尝试刷新管理模块上的页面时，我将从 LoginModule 丢失存储。

正如您在路由模块中看到的那样，我正在使用Guard canLoad中的Guard逻辑，该逻辑应更改 LoginModule 存储中的状态，但刷新页面后我丢失了它。

---

工作正常并在 LoginModule 中更改状态：

---

AdminModule 上的刷新页面后不起作用，存储区为空：

Answer 1

一种可行的解决方案是将商店管理代码放在共享模块中，因为它在所有延迟加载的功能模块之间共享（如果您从未使用过共享模块，则可以查看此link参考）。 请注意，您需要在应用程序模块中导入共享模块。

如果您现在开始一个新项目，我建议您签出NGXS，它可以替代NgRX。我遇到了很多程序员，他们决定将其代码从NgRX迁移到NGXS，因为它减轻了状态管理的复杂性。