javascript - Redux DevTools 有时会被禁用

Question

我正在使用 Angular 5 + NgRx 开发应用程序。我安装了浏览器扩展 Redux DevTools(适用于 Chrome 和 Firefox)。但是两个扩展都被禁用(图标是灰色的，不显示商店历史记录)

我的应用程序有几个模块，它们是异步加载的。主 app.module.ts 包含此代码

StoreModule.forRoot({
 user: userReducer
})

另一个模块有这个

StoreModule.forFeature('dashboard', dashboardReducer),
StoreModule.forFeature('globalSettings', globalSettingsReducer),
StoreModule.forFeature('userInfo', userSettingsReducer),

结果是 Redux DevTools 扩展被禁用。控制台中没有任何相关错误报告。我究竟做错了什么？我无法让它工作，我感到很沮丧。

当我将其更改为这段(显然是错误的)代码时，有趣的是 DevTools 又开始工作了，但其他的东西坏了(如预期的那样)

StoreModule.forRoot({
 'dashboard': dashboardReducer,
 'globalSettings': globalSettingsReducer,
 'userInfo': userSettingsReducer
}), 

我确实需要 DevTools 才能工作，因为它可以帮助我更好地处理/可视化应用程序的当前状态。此外，如果没有 Redux DevTools 和时间旅行调试，整个 Redux 方法在我看来就像写了太多样板文件。当工具生态系统正常运行时，它很棒，但当它崩溃时，我所拥有的只是更多的样板代码(reducer、actions 等)。

为什么 Redux DevTools 无法启动？为什么它不向控制台报告任何错误？如何让它再次工作？

PS:我没有使用 Redux DevTools 的 npm 包，我使用的是@ngrx/store 提供的原始存储。它曾经工作正常，直到我添加了 .forFeature() 调用。

请多多指教

Answer 1

Aaaah，所以解决方案是在 MAIN 模块(通常称为 app.module)中初始化 StoreDevtoolsModule。如果您在稍后加载的某个其他模块中初始化它，那么它将以荒谬怪异的方式运行(请参阅我的原始问题)

因此解决方案是将 StoreDevtoolsModule.instrument({ maxAge: 25 }) 从异步加载模块移动到主 app.module。之后，它又像魅力一样发挥作用。

但对我来说，作为这个项目的新手，当 DevTools 之前已经设置好时，完全不明显，为什么它突然停止工作。