L'API React Context est un outil de gestion d'état utilisé pour partager des données entre les composants React. Découvrez comment utiliser l'API Context pour suivre les utilisateurs authentifiés dans les composants fonctionnels.

Qu'est-ce que l'API React Context ?

React est une bibliothèque basée sur des composants. Ses applications comprennent différents composants qui fonctionnent ensemble. Dans certains cas, votre application doit partager des données entre ces composants.

Par exemple, vous pouvez partager le nom d'utilisateur de l'utilisateur actuel à partir du Connexion composant à d'autres composants de votre application. Le contexte facilite le partage du nom d'utilisateur en éliminant le besoin de transmettre des données via chaque composant de l'arborescence des composants.

Quand devriez-vous utiliser l'API React Context ?

Avant d'utiliser le contexte React, considérez d'abord le type de données avec lesquelles vous travaillez. Le contexte est plus adapté aux données statiques. Les données qui changent continuellement entraîneront trop de nouveaux rendus et, par conséquent, réduiront les performances. Les données doivent également être globales ou au moins utilisées par de nombreux composants, par exemple, des données telles que la langue de l'utilisateur, les thèmes et l'authentification.

Utilisation du contexte pour suivre l'état de l'authentification de l'utilisateur

Si votre application utilise l'authentification, nombre de ses composants devront connaître l'état d'authentification de l'utilisateur actuel. La transmission du statut d'authentification à chaque composant est redondante et conduit à un forage d'accessoires. L'utilisation du contexte est donc une bonne option.

createContext()

Pour démarrer avec l'API Context, vous devez d'abord la créer à l'aide de cette syntaxe.

const Context = React.createContext (defaultValue);

La valeur par défaut est inutile et est généralement utilisée à des fins de test.

Fournisseur

Chaque contexte a un fournisseur qui reçoit une valeur consommée par les composants qu'il encapsule. Il permet à ces composants de s'abonner aux changements de contexte.

useContext

useContext() est un Crochet de réaction qui permet aux composants de consommer du contexte. Il suffit de passer dans le contexte.

const contextValue = useContext (Contexte)

Créons maintenant le contexte d'authentification pour suivre l'état de l'authentification.

Commencez par créer un nouveau fichier, AuthContext.js, et ajoutez ce qui suit.

importer { createContext } de "réagir" ;
const AuthContext = createContext();
exporter le AuthContext par défaut ;

Ensuite, créez AuthProvider.js et ajoutez la fonction de fournisseur.

import { useState, useEffect } de 'réagir' ;
importer { getUser } depuis './auth.js'
importer AuthContext depuis './AuthContext'
export const AuthProvider = ({ enfants }) => {
 const [utilisateur, setUser] = useState (null);
 useEffet(() => {
 const utilisateur actuel = getUser()
 setUser (utilisateur actuel)
 }, []);
retourner (
{enfants}
 );
 };

Ici, vous récupérez l'utilisateur actuel d'un faux getUser() une fonction. Dans une application réelle, ce serait votre service backend.

Stockez l'utilisateur dans l'état actuel pour garder une trace de toutes les modifications, puis transmettez l'utilisateur au fournisseur dans la valeur prop.

AuthProvider.js reçoit également les enfants ayant accès au contexte.

L'étape suivante consiste à créer un crochet personnalisé qui permettra aux composants enveloppés avec le fournisseur d'accéder au contexte.

Créer un nouveau fichier useAuthContext.js et ajoutez ce qui suit.

importer AuthContext depuis "./AuthContext" ;
const useAuthContext.js = () => {
 utilisateur const = useContext (AuthContext);
 si (utilisateur non défini) {
 throw new Error("useAuthContext ne peut être utilisé que dans AuthProvider");
 }
 utilisateur de retour ;
};

Maintenant, si le code en dehors du fournisseur appelle AuthContext, votre application gérera l'erreur avec élégance.

La dernière étape consiste à envelopper les composants en utilisant le contexte avec AuthProvider.js.

import { AuthProvider } de "./AuthContext" ;
ReactDOM.render(




,
 élément racine
);

Voici un exemple de la façon dont vous utiliseriez le contexte pour protéger une page des utilisateurs non authentifiés.

importer useAuthContext depuis "./useAuthContext" ;
import {Naviguer} de "react-router-dom" ;
Profil const = () => {
 const { utilisateur } = useAuthContext();
 si (!utilisateur) {
 retourner ;
 }
 retourner (
 <>
Profil

 );
};

Ce composant rend conditionnellement la page de profil en fonction du statut d'authentification de l'utilisateur. Il vérifie si l'utilisateur existe et s'il n'existe pas, le redirige vers la page de connexion. Sinon, il rend la page de profil.

Quand ne pas utiliser l'API React Context

Dans cet article, vous avez appris à utiliser Context pour suivre un utilisateur authentifié dans tous les composants. Bien que vous puissiez être tenté d'utiliser Context pour tous vos cas d'utilisation de partage de données, vous ne devriez pas le faire car cela réduit la maintenabilité et les performances du code. Chaque fois que la valeur de contexte change, chaque composant qui consomme des rendus d'état. Si les données ne sont utilisées que par quelques composants, optez pour les props.

Comment utiliser les accessoires dans ReactJS

Lire la suite

A propos de l'auteur