Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Défi : Implémentation du Reducer | Atelier de Défi Redux Toolkit
Redux Toolkit & React

bookDé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

  1. Ouvrir le fichier goalReducer.js.
  2. Créer le reducer en utilisant la fonction createReducer du package @reduxjs/toolkit. Cette fonction simplifie le processus de 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 le action.payload (l’objectif) dans le 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 le processus de 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.
Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 3. Chapitre 5

Demandez à l'IA

expand

Demandez à l'IA

ChatGPT

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

bookDé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

  1. Ouvrir le fichier goalReducer.js.
  2. Créer le reducer en utilisant la fonction createReducer du package @reduxjs/toolkit. Cette fonction simplifie le processus de 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 le action.payload (l’objectif) dans le 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 le processus de 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.
Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 3. Chapitre 5
some-alt