具有延迟加载模块的 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 的程序员，因为它简化了状态管理的复杂性。