NgRx Redux devtools не показывает информацию о хранилище и состоянии, даже если приложение работает нормально

Question

Я использую приведенный ниже пример приложения, чтобы узнать angular + ngrx. APM Пример приложения NgRx

Я установил Redux Firefox расширение. Но всякий раз, когда я запускаю / перезагружаю приложение, на вкладке "Извлечение" отображается сообщение "Магазин не найден". Приложение работает как положено (может сохранить состояние). Я могу отправлять действия, обрабатывать их в редукторе и т. Д. Пожалуйста, помогите... Я застрял в этом довольно долго.

Answer 1

Чтобы использовать Redux devtools, вам нужно установить @ngrx/store-devtools и импортировать его в AppModule - документы.

Установите его с помощью:

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 2

Проблема с приложением Angular возникает, когда Redux не видит твоего Store

Убедитесь, что у вас есть

    StoreDevtoolsModule.instrument(...)

после

    StoreModule.forRoot(...)

В противном случае у вас проблемы.

Кстати, лучше установить DevTools с

ng add @ngrx/store-devtools

Добавляет схему в проект.

Answer 3

У меня была та же проблема... Затем, наконец, я попытался запустить свое приложение вне отладчика VSCode, и все работает нормально. Почему-то отладчик в VSCode не позволяет увидеть вкладку Redux в Devtools.

Answer 4

Если у вас установлен @ngrx/store-devtools и магазин все еще не отображается (вместо этого вы видите, что Магазин не найден - бла-бла-бла- инструкции), откройте контекстное меню над фреймом и выберите " Перезагрузить фрейм".

В одном из билетов говорилось, что этот обходной путь больше не нужен, но для меня это было так (Angular и store около v.7.2.x, расширение Redux DevTools 2.17)

Answer 5

Убедитесь, что вы установили ngrx/store-devtools, выполнив следующие команды

npm install @ngrx/store-devtools --save

Я хочу поделиться своим двухцентовым опытом, который может быть полезен для многих из вас. Возникла проблема с заказом. Вы должны добавить ngrx/store-devtools после редуктора. Если не поддерживать порядок, не получится.

Answer 6

вызовите метод инструмента в модуле приложения, чтобы устранить эту ошибку.

Пример-

       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
    
      ],