Comment installer DevTools de ngRx ? ​

Intérêt ? ​

L'intérêt de DevTools est de fournir une interface graphique pour visualiser et déboguer l'état de votre application ngRx. Cela peut être particulièrement utile lorsque vous travaillez sur des projets de grande envergure avec de nombreux développeurs et des actions et des états complexes. DevTools vous permet de voir comment l'état de votre application change au fil du temps, de définir des points de rupture sur des actions spécifiques et de déboguer l'état de votre application de manière interactive.

L'utiliser ​

Vous pouvez installer DevTools en exécutant la commande suivante :

npm install @ngrx/store-devtools

npm install @ngrx/store-devtools

Pour ajouter DevTools à votre projet, vous devez d'abord importer le module StoreDevtoolsModule dans votre module principal :

import { StoreDevtoolsModule } from '@ngrx/store-devtools';

@NgModule({
  imports: [
    // Other imports
    StoreDevtoolsModule.instrument({
      maxAge: 25, // Retains last 25 states
      logOnly: environment.production, // Restrict extension to log-only mode
    }),
  ],
  // Other properties
})
export class AppModule {}

import { StoreDevtoolsModule } from '@ngrx/store-devtools';

@NgModule({
  imports: [
    // Other imports
    StoreDevtoolsModule.instrument({
      maxAge: 25, // Retains last 25 states
      logOnly: environment.production, // Restrict extension to log-only mode
    }),
  ],
  // Other properties
})
export class AppModule {}

Le paramètre maxAge de la méthode instrument() de StoreDevtoolsModule permet de définir le nombre d'états précédents que DevTools doit conserver dans son historique. Cela peut être utile si vous souhaitez voir comment l'état de votre application a évolué au fil du temps et si vous souhaitez accéder à des états précédents pour déboguer des problèmes. Par exemple, si vous définissez maxAge sur 25, DevTools conservera les 25 derniers états de votre application et vous permettra de naviguer entre eux.

Le paramètre logOnly de la méthode instrument() de StoreDevtoolsModule permet de définir si DevTools doit fonctionner en mode "journalisation uniquement" ou en mode normal. En mode "journalisation uniquement", DevTools ne modifie pas l'état de votre application et ne déclenche aucune action. Il enregistre simplement toutes les actions et l'état de votre application dans son historique pour que vous puissiez les consulter plus tard. Cela peut être utile si vous souhaitez enregistrer l'état de votre application sans interférer avec son fonctionnement normal. Par exemple, vous pouvez utiliser le paramètre logOnly pour enregistrer l'état de votre application pendant les tests de charge ou pour enregistrer l'état de votre application pendant une séance de débogage et le consulter plus tard.