Étape 3

Se concentrer sur la création d’un reducer pour gérer les actions dispatchées et mettre à jour l’état des objectifs dans le store Redux. Les reducers sont des fonctions pures qui définissent comment l’état doit changer en réponse aux actions.

Exemple

Défi

1. Ouvrir le fichier goalReducer.js.
2. Créer le reducer en utilisant la fonction createReducer du package @reduxjs/toolkit. Cette fonction simplifie la création des reducers.
3. Définir l’état initial des objectifs comme un tableau vide ([]).
4. À l’intérieur de la fonction createReducer, spécifier les cas pour différentes actions en utilisant les actions créées dans le fichier goalAction.js.
5. Pour ajouter un objectif, utiliser la méthode .addCase et passer l’action addGoal comme premier argument. Dans la fonction de rappel correspondante, mettre à jour l’état en ajoutant action.payload (l’objectif) au tableau d’état.
6. Pour supprimer un objectif, utiliser la méthode .addCase et passer l’action removeGoal comme premier argument. Dans la fonction de rappel correspondante, mettre à jour l’état en retournant un nouveau tableau qui filtre l’objectif avec l’identifiant correspondant (goal.id) du tableau d’état.

1. La fonction createReducer simplifie la création des reducers en fournissant une syntaxe pratique.
2. Utiliser la méthode .addCase de l’objet builder pour spécifier les cas pour différentes actions.
3. Accéder à la payload de l’action en utilisant action.payload.