Dans le cours : React : Créer et héberger un site full-stack

Créer des variables globales context API - Tutoriel React.js

Dans le cours : React : Créer et héberger un site full-stack

Démarrer mon mois d’essai gratuit Acheter pour mon équipe

Créer des variables globales context API

“

Dans cette étape de la démonstration, on va découvrir comment utiliser le contexte API. C'est une solution qui est fournie par React pour gérer un état global, donc pour créer et partager des valeurs globales entre composants sans avoir à passer manuellement des données d'un composant à un autre. Donc, imaginez que vous ayez une application beaucoup plus complexe que celle-ci et que pour passer des données, vous ayez à passer du plus haut niveau au plus bas jusqu'au plus bas en passant par des étapes intermédiaires. Ce qui deviendrait très vite fastidieux et difficilement maintenable. Pour éviter cela, on va utiliser un état global, ce qui va permettre de centraliser, de gérer la logique de l'application toute entière dans un seul endroit pour n'avoir qu'une seule source de vérité. Donc, ce que l'on va faire tout d'abord, c'est créer un nouvel objet contexte, donc on va se passer au niveau| de l'application client comme d'habitude, au niveau de src. Je vais créer un nouveau répertoire que je vais appeler « context » et à l'intérieur, on va trouver un index. Donc, ce qu'on va faire, on va déjà rajouter à la portée de notre fichier à partir du module React, on va rajouter celui-ci. Cette méthode qui est createContext, on va également rajouter useContext, donc c'est un « hook » qui va nous permettre de créer ici un hook personnalisé, je vais vous montrer après. On aura également usage de useMemo, ce qui va permettre de retourner une valeur mémoisée, je vais vous montrer comment et on va également créer des valeurs locales qui vont aussi devenir des valeurs globales par la suite. Donc, on va commencer par créer un nouvel objet context que je vais appeler « AppContext » avec createContext et donc, cet objet context va nous donner accès à deux composants : donc, ce sera tout d'abord Provider et un autre qui est Consumer qu'on ne va pas utiliser dans cet exemple, donc je vais l'omettre. Ensuite, nous allons créer un AppProvider, donc ce composant qui va enrober, donc le composant principal, il va donc se trouver au plus haut niveau de l'application, de la hiérarchie de l'application et va permettre au composant descendant de souscrire et d'accéder à des variables globales, c'est-à-dire à un état global. Ici, on va préciser children, là on va retourner Provider ; et donc Provider, ce composant va prendre une seule prop qui se nomme « value ». C'est cette prop qui va permettre de partager avec le reste de l'application des variables globales. Pour l'instant, on va juste mettre un objet vide. Et c'est au-dessus que je vais définir une value. Donc, ça va d'ailleurs être retourné au moyen de useMemo et donc, ce useMemo, ce hook va permettre de retourner une valeur mémoisée, c'est-à-dire que la valeur sera recalculée uniquement s'il y a un changement dans les dépendances que je vais transmettre ici en paramètres dans ce tableau. En attendant, on va retourner un tableau vide, on va le compléter par la suite. On va commencer par ici définir des variables locales que je vais définir avec useState qui va prendre en valeur initiale un tableau et ça va d'ailleurs ressembler à l'implémentation que l'on avait faite ici dans List, donc il s'agira en fait ici de définir une variable qui va comporter la collection de posts, d'articles de bog. Et ensuite, on va créer ici une fonction qui va servir à fetch, donc à faire la requête, et c'est justement ici que l'on va rajouter dans la portée de ce fichier cette fonction qui va servir à faire un appel réseau. Donc, c'est ici que l'on va gérer les requêtes HTTP. Donc, ce sera getPosts. Donc, dans fetchPosts, on va faire comme on a fait dans le premier exemple, celui-ci va retourner une promesse, ensuite on va mettre à jour cette variable locale. Donc ici, comment ça se passe ? Le résultat de cette promesse va passer en paramètre de setPosts pour mettre à jour Posts et c'est justement ce que nous allons retourner ici comme variable globale avec value. On va également mettre à disposition des composants qui vont souscrire au context fetchPosts. Et ensuite, je vais passer en valeur de value setValue. Et je vais pas oublier aussi de mettre à jour ici la liste des dépendances puisque lorsqu'il y aura des changements dans une des dépendances, cette valeur sera recalculée, ce qui permettra de mettre à jour des variables globales, mais aussi de mettre à jour les composants qui auront souscrit aux variables globales. Ce que l'on va faire maintenant, c'est exporter celui-ci pour pouvoir l'utiliser à l'intérieur de ce contexte, ce sera AppProvider. Et je vais ensuite envelopper, donc je vais trouver le point d'entrée de cette application, je vais le rajouter à la portée ici de ce fichier, le point d'entrée. Et je vais envelopper ce composant principal pour permettre à tous les composants descendants de souscrire au contexte pour accéder aux valeurs globales. Donc là, on va voir que désormais, on aura accès ici à ce AppProvider et si on regarde le contenu, on peut retrouver ici donc avec useMemo, les valeurs, donc pour l'instant, il s'agit d'un tableau vide et fetchPosts et on va justement utiliser celui-ci. Maintenant que l'on se sera occupé de séparer la gestion de la logique, on va voir comment s'abonner à cette logique pour souscrire aux changements de l'état et ensuite utiliser les changements d'état pour mettre à jour l'interface ; c'est ce que l'on fait juste après, on va voir comment partager et utiliser les valeurs globales.

Table des matières