# 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 AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NgxsModule } from '@ngxs/store';
import { NgxsReduxDevtoolsPluginModule } from '@ngxs/devtools-plugin';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgxsModule.forRoot([ /* Ici, on aura les classes du Store */ ]),
    NgxsReduxDevtoolsPluginModule.forRoot()
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }