带有延迟加载模块的 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 逻辑，其中的逻辑应该会更改 LoginModule 商店中的状态，但刷新页面后我丢失了它。

---

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

---

在 AdminModule 上刷新页面后不起作用，商店为空：

Answer 1

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

如果您现在开始一个新项目，我建议您查看NGXS，它是 NgRX 的替代品。我遇到过很多程序员决定将他们的代码从 NgRX 迁移到 NGXS，因为它简化了状态管理的复杂性。