CATALOGUE Code & Data Formation Redux Apprendre Redux Optimisation de l'application React avec React-Redux

Optimisation de l'application React avec React-Redux

Connecter un container au store Redux
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre Redux
Revoir le teaser Je m'abonne
Transcription
Cette leçon fait partie de la formation
49,90€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
Cette leçon fait partie de la formation
49,90€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Gestion optimale du rendu et des props

Objectifs

Les objectifs de cette vidéo sont :

  • Comprendre comment améliorer le rendu des composants en utilisant React-Redux et en évitant store.subscribeRender().
  • Apprendre à mapper l'état global et les actions de dispatch dans les props des composants.
  • Optimiser le code en supprimant les dépendances à this.context.

Résumé

Dans cette leçon, nous allons apprendre à utiliser React-Redux pour optimiser le rendu de notre application en gérant efficacement le dispatch et le mappage des états.

Description

La vidéo présente une méthode avancée pour éviter l'utilisation de store.subscribeRender() en favorisant une approche plus performante pour rendre les composants React uniquement lorsque les données pertinentes changent.

Le processus inclut :

  • Création de fonctions mapStateToProps et mapDispatchToProps.
  • Utilisation de la fonction connect de React-Redux pour lier les états et les dispatchs aux props de composants.
  • Suppression de la dépendance à this.context pour utiliser les props à la place.

Cette méthode permet de réduire le code verbeux et d'améliorer les performances en limitant les re-rendus inutiles.

Voir plus

Questions fréquentes

Pourquoi est-il mauvais d'utiliser store.subscribeRender() ?
Utiliser store.subscribeRender() est inefficace car il force le re-rendu complet de l'application à chaque changement de state, ce qui peut entraîner des problèmes de performance.
Quels sont les avantages de mapper state et dispatch dans les props ?
Mapper state et dispatch dans les props permet de contrôler précisément quels composants doivent se re-render en réponse à des changements de state, améliorant ainsi les performances de l'application.
Quelle fonction de React-Redux utilise-t-on pour connecter des composants aux props ?
La fonction connect de React-Redux permet de lier les state et dispatch aux props des composants, simplifiant ainsi la gestion du state global et des actions dans une application React.