Installation de NgRx Signal Store

NgRx Signal Store est une bibliothèque de gestion d'état moderne pour Angular qui utilise les signaux pour une réactivité optimale. Contrairement à NgRx Store traditionnel, Signal Store offre une API plus légère et intuitive, parfaitement intégrée avec les signaux d'Angular.

Comprendre la gestion d'état

Avant de plonger dans le code, imaginons un magasin de vêtements. Dans ce magasin, il y a un inventaire centralisé (l'état), des vendeurs qui consultent l'inventaire (lecture), et des gestionnaires qui mettent à jour l'inventaire lorsque de nouveaux produits arrivent ou sont vendus (écriture). Signal Store fonctionne de manière similaire : il maintient un état centralisé de votre application, avec des méthodes claires pour lire et modifier cet état.

Installation du package

Pour commencer avec NgRx Signal Store, vous devez d'abord l'installer dans votre projet Angular :

# Installer NgRx Signal Store
npm install @ngrx/signals

COMPATIBILITÉ

NgRx Signal Store fonctionne à partir d'Angular 16+ qui introduit les signaux. Pour une expérience optimale, utilisez Angular 17+ où les signaux sont stables.

Configuration initiale

Après l'installation, vous n'avez pas besoin de configuration globale comme avec NgRx Store traditionnel. Signal Store est conçu pour être utilisé au niveau des composants ou des services, sans nécessiter de configuration au niveau du module racine.

Structure de base d'un Signal Store

Voici à quoi ressemble un Signal Store simple :

import { signalStore, withState, withMethods } from '@ngrx/signals';
import { patchState } from '@ngrx/signals';

// Définir l'interface pour notre état
interface CounterState {
  count: number;
}

// Créer le store
export const CounterStore = signalStore(
  // État initial
  withState<CounterState>({ count: 0 }),
  
  // Méthodes pour mettre à jour l'état
  withMethods((store) => ({
    increment() {
      patchState(store, (state) => ({ count: state.count + 1 }));
    },
    decrement() {
      patchState(store, (state) => ({ count: state.count - 1 }));
    },
    reset() {
      patchState(store, { count: 0 });
    }
  }))
);

Intégration dans un composant

Pour utiliser ce store dans un composant, vous pouvez simplement l'injecter :

import { Component, inject } from '@angular/core';
import { CounterStore } from './counter.store';

@Component({
  selector: 'app-counter',
  standalone: true,
  template: `
    <div>
      <h2>Counter: {{ counterStore.count() }}</h2>
      <button (click)="counterStore.increment()">+</button>
      <button (click)="counterStore.decrement()">-</button>
      <button (click)="counterStore.reset()">Reset</button>
    </div>
  `,
  providers: [CounterStore] // Fournir le store au niveau du composant
})
export class CounterComponent {
  // Injecter le store
  counterStore = inject(CounterStore);
}

INJECTION

Vous pouvez injecter le store au niveau du composant pour une portée limitée, ou au niveau racine avec { providedIn: 'root' } pour un état global.

Exemple complet

Voici un exemple complet d'installation et d'utilisation de NgRx Signal Store :