带有延迟加载模块的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内部的Guard canLoad逻辑来更改LoginModule存储中的状态，但刷新页面后我丢失了它。

---

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

---

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

Answer 1

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

注意，您需要在应用程序模块中导入共享模块。

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