Les essentiels du Store NgRx

Cette leçon vous présente NgRx, une solution puissante de gestion de l’état pour les applications Angular.

Qu’est-ce que NgRx ?

Inspiré de Redux, NgRx aide à gérer l’état de manière centralisée dans les applications Angular et simplifie la gestion des données entre les composants.

Pourquoi utiliser NgRx ?

• Gestion centralisée de l’état
• Flux de données clair et prévisible
• Débogage et tests facilités

Concepts fondamentaux

NgRx repose sur plusieurs concepts clés :

• Store : contient l’état de l’application
• Actions : décrivent les événements
• Reducers : gèrent les transitions d’état
• Selectors : récupèrent les données d’état

Installer le Store NgRx

Installez NgRx avec npm :

npm install @ngrx/store --save

Créer un Store

Définissez le Store dans le module de votre application :

StoreModule.forRoot({ appState: appReducer })

Créer des actions

Les actions définissent les événements de votre application :

export const loadData = createAction('[App] Load Data');

Reducers

Les reducers gèrent les changements d’état en réagissant aux actions et en produisant un nouvel état :

export const appReducer = createReducer(
  initialState,
  on(loadData, state => ({ ...state, loading: true }))
);

Résumé

Vous avez appris les notions essentielles de l’utilisation du Store NgRx pour gérer efficacement l’état de votre application. Bravo !