Défi : Implémentation du Reducer
É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
- Ouvrir le fichier
goalReducer.js
. - Créer le reducer en utilisant la fonction
createReducer
du package@reduxjs/toolkit
. Cette fonction simplifie le processus de création des reducers. - Définir l’état initial des objectifs comme un tableau vide (
[]
). - À l’intérieur de la fonction
createReducer
, spécifier les cas pour différentes actions en utilisant les actions créées dans le fichiergoalAction.js
. - Pour ajouter un objectif, utiliser la méthode
.addCase
et passer l’actionaddGoal
comme premier argument. Dans la fonction de rappel correspondante, mettre à jour l’état en ajoutant leaction.payload
(l’objectif) dans le tableau d’état. - Pour supprimer un objectif, utiliser la méthode
.addCase
et passer l’actionremoveGoal
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 correspondantgoal.id
du tableau d’état.
- La fonction
createReducer
simplifie le processus de création des reducers en fournissant une syntaxe pratique. - Utiliser la méthode
.addCase
de l’objetbuilder
pour spécifier les cas pour différentes actions. - Accéder à la payload de l’action en utilisant
action.payload
.
Tout était clair ?
Merci pour vos commentaires !
Section 3. Chapitre 5
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
Awesome!
Completion rate improved to 4.17
Défi : Implémentation du Reducer
Glissez pour afficher le menu
É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
- Ouvrir le fichier
goalReducer.js
. - Créer le reducer en utilisant la fonction
createReducer
du package@reduxjs/toolkit
. Cette fonction simplifie le processus de création des reducers. - Définir l’état initial des objectifs comme un tableau vide (
[]
). - À l’intérieur de la fonction
createReducer
, spécifier les cas pour différentes actions en utilisant les actions créées dans le fichiergoalAction.js
. - Pour ajouter un objectif, utiliser la méthode
.addCase
et passer l’actionaddGoal
comme premier argument. Dans la fonction de rappel correspondante, mettre à jour l’état en ajoutant leaction.payload
(l’objectif) dans le tableau d’état. - Pour supprimer un objectif, utiliser la méthode
.addCase
et passer l’actionremoveGoal
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 correspondantgoal.id
du tableau d’état.
- La fonction
createReducer
simplifie le processus de création des reducers en fournissant une syntaxe pratique. - Utiliser la méthode
.addCase
de l’objetbuilder
pour spécifier les cas pour différentes actions. - Accéder à la payload de l’action en utilisant
action.payload
.
Tout était clair ?
Merci pour vos commentaires !
Section 3. Chapitre 5