Variables réactives

Variables réactives

Résumé express : Calculer automatiquement le pourcentage de progression avec variables computed, map et filter pour une réactivité en temps réel.

Introduction aux variables computed

Nous allons créer un indicateur de progression qui affiche le pourcentage d'avancement du projet. Concrètement : nombre de tâches terminées / nombre total de tâches × 100.

Pourquoi une variable computed ?

Contrairement aux variables classiques, les variables computed se recalculent automatiquement quand les données changent. Parfait pour un pourcentage qui doit être mis à jour à chaque ajout ou modification de tâche.

1. Créer la variable computed

Configuration de base

1. Créer une variable computed nommée "percentage"
2. L'afficher dans l'interface (par exemple entre parenthèses dans le header)
3. Accéder à l'onglet Logic pour définir le calcul

2. Calculer le nombre total de tâches

Récupérer les données du store

1. Utiliser get store
2. Spread le store pour accéder aux propriétés
3. Utiliser get property pour récupérer "cards"

Utiliser la fonction Map

La fonction Map exécute une fonction sur chaque élément d'un tableau.

1. Connecter le tableau de cartes à un bloc Map
2. Créer une lambda function (fonction anonyme)
3. Dans cette fonction :
   • Récupérer l'élément courant
   • Utiliser get property pour obtenir "tasks"
   • Utiliser get length pour compter les tâches
4. Connecter à l'exécution de la computed

Additionner tous les résultats

1. Le Map retourne un tableau de nombres (nombre de tâches par carte)
2. Utiliser Sum pour additionner tous les éléments
3. Résultat : nombre total de tâches dans l'application

3. Calculer le nombre de tâches terminées

Filtrer les cartes "Terminé"

1. Récupérer à nouveau le store et les cartes
2. Utiliser Filter au lieu de Map
3. Le Filter garde seulement les éléments qui passent un test

Configurer le test de filtrage

1. Dans la lambda function du Filter :
   • Utiliser get property pour récupérer "title"
   • Tester si title equals "Terminé"
   • Le callback devient rouge (boolean) car c'est un test
2. Connecter à l'exécution (après le Map)

Compter les tâches de la carte "Terminé"

1. Le Filter retourne un tableau avec un seul élément (la carte "Terminé")
2. Utiliser hat (index 0) pour récupérer le premier élément
3. Get property → "tasks" → get length
4. Résultat : nombre de tâches terminées

4. Calculer le pourcentage

Division et formatage

1. Utiliser Divide : tâches terminées ÷ tâches totales
2. Multiply par 100 pour avoir un pourcentage
3. Round pour arrondir le résultat
4. Connecter le résultat final à la variable percentage

Fonction Deep pour les tableaux

⚠️ Important : Comme nous utilisons des tableaux, ajouter la fonction deep à la computed pour qu'elle surveille les changements en profondeur.

Structure logique complète

Le flux de données complet :

1. Store → cartes → Map → longueurs → Sum = total des tâches
2. Store → cartes → Filter → carte "Terminé" → Hat[0] → tâches → Length = tâches terminées
3. Divide → Multiply 100 → Round = pourcentage final

Concepts clés

Variables computed

• Réactivité automatique : recalcul à chaque changement des dépendances
• Performance optimisée : mise en cache jusqu'au prochain changement
• Déclaratif : on décrit ce qu'on veut, pas comment l'obtenir

Fonctions de tableau avancées

• Map : transformation de chaque élément
• Filter : sélection conditionnelle d'éléments
• Sum : agrégation de valeurs numériques
• Hat[index] : accès à un élément spécifique

Surveillance profonde

• deep : nécessaire pour surveiller les changements dans les objets/tableaux
• Sans deep : seules les références sont surveillées
• Avec deep : tous les changements internes sont détectés

Avantages de cette approche

• Temps réel : l'indicateur se met à jour instantanément
• Automatique : aucune action manuelle requise
• Performant : recalcul uniquement si nécessaire
• Maintenable : logique centralisée et réutilisable

Prochainement : Organiser et structurer le code avec des fonctions réutilisables.