NgRx Redux devtools 沒有顯示商店和 state 詳細信息，即使應用程序工作正常

Question

我正在使用下面的示例應用程序來學習 angular+ngrx。 APM 示例 NgRx 應用程序

我已經安裝了 Redux firefox 擴展。 但每當我運行/重新加載應用程序時，redux 選項卡都會顯示“未找到商店”消息。 應用程序按預期工作（能夠保持狀態）。 我能夠調度動作，在減速器等中處理它。請幫助..我被困在這很長一段時間了。

Answer 1

當Redux看不到您的Store時，Angular 應用程序存在問題

檢查你是否有

StoreDevtoolsModule.instrument({maxAge: 25, logOnly: environment.production})

后

StoreModule.forRoot(reducers)

否則你就有麻煩了。

順便說一句，最好安裝 DevTools

ng add @ngrx/store-devtools

它將原理圖添加到項目中。

Answer 2

要使用Redux devtools，您必須安裝@ ngrx / store-devtools並將其導入AppModule - docs 。

安裝它：

npm install @ngrx/store-devtools --save 

導入它：

@NgModule({
  imports: [
    StoreModule.forRoot(reducers),
    // Instrumentation must be imported after importing StoreModule (config is optional)
    StoreDevtoolsModule.instrument({
      maxAge: 25, // Retains last 25 states
      logOnly: environment.production, // Restrict extension to log-only mode
    }),
  ],
})
export class AppModule {}

Answer 3

如果你安裝了@ ngrx / store-devtools並且商店仍然沒有顯示（相反，你看到沒有找到商店 - 等等等等 ），框架上的上下文菜單並選擇Reload Frame 。

其中一張票據聲稱不再需要這種解決方法，但對我來說是（Angular和v.7.2.x左右存儲，Redux DevTools擴展2.17）

Answer 4

確保您已通過以下命令安裝了 ngrx/store-devtools

npm install @ngrx/store-devtools --save

我想把我的兩美分經驗可能對你們中的許多人有所幫助。 有訂單問題。 您必須在減速器之后添加 ngrx/store-devtools。 如果您不維護訂單，它將無法正常工作。

Answer 5

調用應用程序模塊中的儀器方法來解決此錯誤。

例子-

 imports: [
        BrowserModule,
        AppRoutingModule,
        // StoreModule.forRoot({}),
        // StoreModule.forRoot(reducers, { metaReducers }),
    
        StoreModule.forRoot({ count: counterReducer }),
    
        // for debugging enable this instrument in development mode
        **!environment.production ? StoreDevtoolsModule.instrument() : [],**
    
        CustomerModule
    
      ],

Answer 6

我遇到了同樣的問題......最后我嘗試在 VSCode 調試器之外運行我的應用程序，一切正常。 不知何故，VSCode 中的調試器不允許您在 Devtools 中看到 Redux 選項卡