Redux DevTools 有时会被禁用答案

【问题标题】：Redux DevTools are sometimes disabledRedux DevTools 有时会被禁用
【发布时间】：2018-08-07 01:20:20
【问题描述】：

我正在使用 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 方法在我看来就像编写太多样板文件。当工具生态系统工作时，它很棒，但当它崩溃时，我所拥有的只是更多样板代码（reducers、actions 等）。

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

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

请指教

【问题讨论】：

你的 redux 创建存储功能是什么样的？
正如我所说的我不创建商店，我只是从@ngrx/store 导入它，然后添加 store.select(whatever)、store.dispatch() 等
你在使用 store-devtools 吗？ github.com/ngrx/platform/blob/master/docs/store-devtools/…
我不是。这是要求吗？它过去没有它也能正常工作......
对不起。我的不好，我正在使用它（我只是开发人员之一，它已被其他人添加）...(environment.reduxDevTools ? [StoreDevtoolsModule.instrument({ maxAge: 25 })] : [])

标签： javascript redux ngrx ngrx-store redux-devtools-extension

【解决方案1】：

啊啊，所以解决方法是在 MAIN 模块（通常称为 app.module）中初始化 StoreDevtoolsModule。如果您在稍后加载的其他模块中对其进行初始化，那么它将以荒谬的方式表现（请参阅我的原始问题）

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

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

【讨论】：

不时引起我注意的一点是，加载顺序在您的 app.module 中也很重要。 StoreDevtoolsModule.instrument({ maxAge: 50 }), 模块必须始终位于您的 app.module.ts 导入中的 StoreModule.forRoot(reducers, { metaReducers }), 模块之后，否则您将遇到同样的事情。