CATALOGUE Code & Data Formation Redux Apprendre Redux

Implémentation du Visibility Filter dans Redux

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

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.

Détails de la leçon

Description de la leçon

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.

Objectifs de cette leçon

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.

Prérequis pour cette leçon

Pour suivre cette vidéo, il est recommandé d'avoir :

- Une connaissance de base en React et Redux.

- Une compréhension élémentaire des concepts de programmation JavaScript et du modèle d'état.

Métiers concernés

Les techniques abordées dans cette vidéo sont particulièrement utiles pour les :

- Développeurs front-end travaillant sur des applications web complexes.

- Ingénieurs full-stack souhaitant intégrer React dans leur pile technologique.

Alternatives et ressources

Comme alternatives à Redux, vous pouvez explorer :

- MobX, une autre bibliothèque de gestion d'état pour React.

- L'utilisation du context API de React pour la gestion d'état simplifiée.

Questions & Réponses

Un réduceur est une fonction qui prend l'état actuel de l'application et une action, puis retourne un nouvel état.
Les trois états du Visibility Filter sont Show All, Show Active, et Show Completed.
La fonction utilisée pour filtrer les tâches est appelée Get Visible To Do.