Formation Angular – Mettre en place et utiliser un store dans Angular (avec les tests)

Lors de la création d’applications web avec Angular, il est souvent nécessaire de gérer un état global de l’application. Pour cela, Angular propose l’utilisation d’un store, qui permet de stocker et de gérer l’état global de manière centralisée. Dans cet article, nous allons voir comment mettre en place et utiliser un store dans Angular, et comment écrire des tests pour vérifier son bon fonctionnement.

Mise en place du store

Pour mettre en place un store dans Angular, nous allons utiliser la bibliothèque NgRx, qui fournit un ensemble d’outils pour gérer l’état de l’application. Pour commencer, nous devons installer NgRx en utilisant npm :

    npm install @ngrx/store @ngrx/effects @ngrx/entity @ngrx/router-store @ngrx/data @ngrx/schematics --save
  

Une fois NgRx installé, nous pouvons créer notre store en définissant un ensemble de reducers pour gérer l’état de l’application. Un reducer est une fonction qui prend en entrée l’état actuel de l’application et une action, et qui retourne le nouvel état de l’application en fonction de l’action effectuée. Voici un exemple de reducer simple :

    const initialState = {
      count: 0
    };

    function counterReducer(state = initialState, action) {
      switch (action.type) {
        case 'INCREMENT':
          return { count: state.count + 1 };
        case 'DECREMENT':
          return { count: state.count - 1 };
        default:
          return state;
      }
    }
  

Nous devons également définir un ensemble d’actions pour décrire les différentes opérations pouvant être effectuées sur le store. Les actions sont des objets qui contiennent un type spécifique et éventuellement des données supplémentaires. Voici un exemple d’action :

    const incrementAction = { type: 'INCREMENT' };
  

Utilisation du store

Une fois le store mis en place, nous pouvons l’utiliser dans nos composants en utilisant les outils fournis par NgRx. Par exemple, pour récupérer l’état actuel du store dans un composant, nous pouvons utiliser le sélecteur suivant :

    import { createSelector, Store } from '@ngrx/store';

    const selectCount = (state: AppState) => state.count;

    const count$ = store.pipe(select(selectCount));
  

Nous pouvons également dispatcher des actions pour effectuer des modifications sur le store :

    store.dispatch(incrementAction);
  

Tests du store

Enfin, il est important d’écrire des tests pour vérifier le bon fonctionnement du store. Pour cela, nous pouvons utiliser des outils de test fournis par NgRx pour tester nos reducers, nos actions et nos effets. Voici un exemple de test pour notre reducer :

    it('should increment the count', () => {
      const initialState = { count: 0 };
      const action = { type: 'INCREMENT' };
      
      const nextState = counterReducer(initialState, action);
      
      expect(nextState.count).toEqual(1);
    });
  

Avec ces outils, nous pouvons être sûrs que notre store fonctionne correctement et que notre application est stable et fiable.

En conclusion, mettre en place et utiliser un store dans Angular avec NgRx est une étape importante pour gérer l’état global de l’application de manière efficace. En écrivant des tests pour vérifier son bon fonctionnement, nous pouvons nous assurer que notre application est robuste et fiable. J’espère que cet article vous a donné un aperçu des bonnes pratiques pour gérer un store dans Angular et que vous pourrez les appliquer dans vos propres projets.