Installer NgXs

NgXS est une bibliothèque de gestion d'état pour les applications Angular. Il fournit des mécanismes pour gérer de manière centralisée l'état global d'une application Angular, similaire à Redux pour React. NgXS vise à réduire la quantité de code de configuration et de boilerplate, en proposant une syntaxe plus simple et plus orientée vers le paradigme orienté objet.

Intérêt de NgXS

1. Simplicité: NgXS est souvent perçu comme plus simple et plus direct que d'autres solutions comme NgRX, notamment grâce à une diminution du boilerplate nécessaire.
2. Approche orientée objet: Contrairement à l'approche plus fonctionnelle de NgRX, NgXS est conçu autour de l'orienté objet, ce qui peut être plus familier pour certains développeurs Angular.
3. Développement rapide: Avec moins de code à écrire et une syntaxe plus simple, vous pouvez souvent développer des fonctionnalités plus rapidement avec NgXS.
4. Intégration facile avec Angular: NgXS est spécifiquement conçu pour Angular, ce qui signifie qu'il s'intègre bien avec l'écosystème Angular.

Différences avec NgRX:

1. Paradigme: Alors que NgRX est fortement inspiré par Redux et suit une approche fonctionnelle, NgXS est plus orienté objet.
2. Boilerplate: NgXS nécessite généralement moins de code boilerplate que NgRX pour accomplir les mêmes tâches.
3. Syntaxe: NgXS a une syntaxe différente pour définir des actions, des reducers, et des effets par rapport à NgRX.

Éventuels défauts de NgXS:

1. Moins mature: NgXS est une bibliothèque plus récente que NgRX, ce qui signifie qu'elle peut ne pas avoir la même maturité ou le même écosystème établi.
2. Préférences personnelles: Certains développeurs peuvent préférer l'approche fonctionnelle de NgRX à l'approche orientée objet de NgXS.

Installation

Pour installer NgXS dans votre projet Angular, utilisez npm ou yarn:

npm install @ngxs/store

Pour le plugin devtools qui fournit une intégration avec les Redux DevTools:

npm install @ngxs/devtools-plugin

Une fois installé, vous devrez configurer NgXS dans votre module principal en important NgxsModule et, si vous utilisez le plugin devtools, NgxsReduxDevtoolsPluginModule.

Donc, mettez dans app.config.ts:

import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { NgxsReduxDevtoolsPluginModule } from '@ngxs/devtools-plugin';
import { NgxsModule } from '@ngxs/store';

export const appConfig: ApplicationConfig = {
  providers: [
    importProvidersFrom(
      NgxsReduxDevtoolsPluginModule.forRoot(),
      NgxsModule.forRoot([ /** Les états ici */ ])
    )
  ]
};