Configurer le filtre de visibilité dans votre application To-Do
Objectifs
Les objectifs de cette vidéo sont :
- Apprendre à créer et utiliser un réduceur Visibility Filter.
- Savoir filtrer les tâches dans une application To-Do.
- Maîtriser l'intégration de boutons de filtre pour interagir avec l'état des tâches en temps réel.
Résumé
Découvrez comment utiliser un réduceur Visibility Filter pour contrôler l'affichage des tâches dans une application To-Do en React Redux.
Description
Dans cette leçon, nous allons approfondir l'utilisation des réduceurs dans Redux en implémentant un réduceur pour gérer le Visibility Filter dans une application To-Do. Vous apprendrez à configurer trois états différents : Show All, qui affiche toutes les tâches, Show Active, qui ne montre que les tâches non accomplies, et Show Completed, qui affiche uniquement les tâches terminées.
Nous commencerons par créer une fonction Get Visible To Do, qui filtrera les tâches en fonction du filtre de visibilité sélectionné. Ensuite, nous verrons comment intégrer cette fonction dans notre réduceur et comment utiliser des boutons pour permettre à l'utilisateur de changer le filtre de visibilité en temps réel.
Enfin, nous passerons à une phase de test où nous vérifions que les filtres fonctionnent correctement en ajoutant, complétant et affichant des tâches dans différentes catégories. Un léger ajout de CSS sera également réalisé pour améliorer l'interface utilisateur.