Angular
State Management

📌 NgRx : Stocker et récupérer

Utilisez NgRx pour la gestion d'état centralisée dans Angular. Déclenchez des actions pour stocker les données et utilisez des sélecteurs pour les récupérer facilement.

Démonstration

import { CommonModule } from '@angular/common';
import { Store } from '@ngrx/store';
import { CategoriesService } from './../../../../services/categories-http/categoriesHttp.service';
import { Component, OnInit } from '@angular/core';
import { addCategories, selectCategories } from '../../../../ngrx/data.slice';
import { Categorie } from '../../../../interfaces/categorie';

@Component({
  selector: 'app-ngrx',
  imports: [CommonModule],
  template: `
    <div class="container mt-3">
      <h1>ngrx: select et dispatch</h1>
      <button class="btn btn-success" (click)="showCategories()">
        Afficher tous les categories
      </button>
      @if (categories.length > 0) {
        <ul class="mt-3">
          @for (category of categories; track $index) {
            <li>{{ category.nom }}</li>
          }
        </ul>
      }
    </div>
  `
})
export class NgrxComponent implements OnInit {
  categories: Categorie[] = [];

  constructor(private categoriesService: CategoriesService, private store: Store) {}

  ngOnInit(): void {
    this.fetchCategories();
  }

  fetchCategories() {
    this.categoriesService.getCategories().subscribe({
      next: (response) => {
        if (response?.success) {
          this.store.dispatch(addCategories(response.dataCat || []));
        }
      }
    });
  }

  showCategories() {
    this.store.select(selectCategories).subscribe(
      (categories) => (this.categories = categories)
    );
  }
}
import { createAction, createReducer, on, createFeatureSelector, createSelector } from '@ngrx/store';
import { Categorie } from '../interfaces/categorie';

export interface DataState {
  categories: Categorie[];
}

const initialState: DataState = {
  categories: []
};

// --- Actions ---
export const addCategories = createAction(
  '[Categories] Add Categories',
  (payload: Categorie[]) => ({ payload })
);

// --- Reducer ---
export const dataReducer = createReducer(
  initialState,
  on(addCategories, (state, { payload }) => ({ ...state, categories: payload }))
);

// --- Selectors ---
export const selectDataState = createFeatureSelector<DataState>('data');
export const selectCategories = createSelector(selectDataState, (state) => state.categories);

import { provideStore } from '@ngrx/store';
import { dataReducer } from './data.slice';

export const appStore = provideStore({
  data: dataReducer,
});

Démarche à suivre

  1. Installer NgRx : npm install @ngrx/store
  2. Créer les actions, le reducer et les sélecteurs (voir data.slice.ts).
  3. Ajouter appStore dans les providers de votre configuration Angular (app.config.ts).