Étape 3

Concentrez-vous sur la création d'un réducteur pour gérer les actions envoyées et mettre à jour l'état des objectifs dans le magasin Redux. Les réducteurs sont des fonctions pures qui spécifient comment l'état doit changer en réponse aux actions.

Exemple

Défi

1. Ouvrez le fichier goalReducer.js.
2. Créez le réducteur en utilisant la fonction createReducer du package @reduxjs/toolkit. Cette fonction simplifie le processus de création de réducteurs.
3. Définissez l'état initial des objectifs à un tableau vide ([]).
4. À l'intérieur de la fonction createReducer, spécifiez les cas pour différentes actions en utilisant les actions créées dans le fichier goalAction.js.
5. Pour ajouter un objectif, utilisez la méthode .addCase et passez l'action addGoal comme premier argument. Dans la fonction de rappel correspondante, mettez à jour l'état en ajoutant le action.payload (l'objectif) dans le tableau d'état.
6. Pour supprimer un objectif, utilisez la méthode .addCase et passez l'action removeGoal comme premier argument. Dans la fonction de rappel correspondante, mettez à jour l'état en retournant un nouveau tableau qui filtre l'objectif avec le goal.id correspondant du tableau d'état.

1. La fonction createReducer simplifie le processus de création de réducteurs en fournissant une syntaxe pratique.
2. Utilisez la méthode .addCase de l'objet builder pour spécifier les cas pour différentes actions.
3. Accédez à la charge utile de l'action en utilisant action.payload.