CATALOGUE Code & Data Formation Redux Apprendre Redux

Implémentation du Toggle dans un Réduceur Redux

Retour à la formation
Chapitre 3 Leçon 2
Précédent
Suivant

Dans cette leçon, nous apprenons à implémenter un toggle pour valider l'accomplissement d'une tâche en ajustant l'état de completed d'une todo.

Détails de la leçon

Description de la leçon

Cette vidéo vous guide à travers le processus d'implémentation d'un toggle dans un réduceur Redux pour modifier l'état de completed des todos. Nous commençons par écrire un test pour vérifier la fonctionnalité, puis nous implémentons la logique dans le réduceur. Pour ce faire, nous utilisons une nouvelle référence mémoire avec state.map pour parcourir et modifier l'objet cible dans notre tableau de todos. Nous vérifions l'identifiant de chaque tâche et utilisons l'inverse de l'état actuel de completed pour réaliser le toggle. Une fois cette modification effectuée, nous constatons que nos tests passent avec succès, validant notre implémentation.

Objectifs de cette leçon

Les objectifs de cette vidéo sont :

  • Écrire et mettre en place des tests unitaires pour les réduceurs Redux.
  • Implémenter une fonction de toggle pour changer l'état de completed des tâches.
  • Comprendre comment manipuler les références mémoire dans Redux.

Prérequis pour cette leçon

Pour suivre cette vidéo, vous devez avoir :

  • Des connaissances de base en JavaScript et Redux.
  • Une expérience en rédaction de tests unitaires avec Jest ou un autre framework de test.

Métiers concernés

Ce sujet est pertinent pour :

  • Les développeurs front-end travaillant sur des applications web complexes.
  • Les ingénieurs logiciels spécialisés en JavaScript.
  • Les testeurs de logiciels axés sur les tests unitaires et l'assurance qualité.

Alternatives et ressources

Les alternatives à cette méthode incluent :

  • Utiliser d'autres bibliothèques de gestion d'état comme MobX.
  • Appliquer des hooks de gestion d'état directement dans React sans Redux.

Questions & Réponses

Nous utilisons state.map pour éviter de muter l'état de manière immuable et pour retourner un nouvel état.
Le toggle change l'état de completed en son inverse, plutôt que de le régler simplement à vrai.
Le test compare l'état avant et après l'action toggle pour s'assurer que seulement l'élément ciblé a changé d'état.