Context API et Gestion Globale d'État

Création d'un Contexte : Gestion du Thème avec React Context

Pour utiliser Context API, vous devez d'abord créer un contexte en utilisant la fonction createContext. Voici un exemple de création d'un contexte pour gérer un thème d'application :

Le code ci-dessous implémente un système de gestion de thème (clair/sombre) à l'aide de React Context et de useState. Cela permet de partager l'état du thème dans toute l'application sans avoir à passer des props manuellement à chaque composant.

1. Création du Contexte

Le contexte ThemeContext est créé avec createContext() pour stocker l'état du thème et la fonction de basculement.

2. Implémentation du Provider

Le composant ThemeProvider gère l'état du thème et le met à disposition des composants enfants via ThemeContext.Provider.

📋 Copier le code

import React, { createContext, useState } from 'react';

// Créer un contexte pour le thème
const ThemeContext = createContext();

function ThemeProvider({ children }) {
const [theme, setTheme] = useState('light');

const toggleTheme = () => {
setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'));
};

return (
<ThemeContext.Provider value={{ theme, toggleTheme }}>
	{children}
</ThemeContext.Provider>
);
}

export { ThemeContext, ThemeProvider };

Explication du code :

• createContext : Crée un contexte qui sera utilisé pour partager des données entre les composants.
• ThemeProvider : Un composant qui fournit le contexte à ses enfants. Il contient l'état theme et une fonction toggleTheme pour basculer entre les thèmes.
• value : Les données et fonctions que vous souhaitez partager via le contexte sont passées dans la prop value.

Utilisation du Contexte dans un Composant

Une fois le contexte créé, vous pouvez l'utiliser dans n'importe quel composant en utilisant le hook useContext. Voici un exemple :

📋 Copier le code

import React, { useContext } from 'react';
import { ThemeContext } from './ThemeProvider';

function ThemeToggleButton() {
const { theme, toggleTheme } = useContext(ThemeContext);

return (
<button onClick={toggleTheme}>
	Basculer en mode {theme === 'light' ? 'sombre' : 'clair'}
</button>
);
}

export default ThemeToggleButton;

Explication du code :

• useContext : Ce hook permet de consommer les données du contexte. Ici, nous récupérons theme et toggleTheme.
• toggleTheme : Cette fonction permet de basculer entre les thèmes "clair" et "sombre".

Comparaison entre Context API et Redux

Context API et Redux sont deux solutions populaires pour la gestion d'état global dans React. Voici une comparaison rapide :

Exemple concret : Gestion d'un état utilisateur global

Voici un exemple concret d'utilisation de Context API pour gérer un état utilisateur global, comme les informations de connexion :

📋 Copier le code

import React, { createContext, useState } from 'react';

// Créer un contexte pour l'utilisateur
const UserContext = createContext();

function UserProvider({ children }) {
const [user, setUser] = useState(null);

const login = (userData) => {
setUser(userData);
};

const logout = () => {
setUser(null);
};

return (
<UserContext.Provider value={{ user, login, logout }}>
	{children}
</UserContext.Provider>
);
}

export { UserContext, UserProvider };

Explication du code :

• UserContext : Un contexte pour gérer les informations de l'utilisateur.
• login : Une fonction pour connecter l'utilisateur en mettant à jour l'état user.
• logout : Une fonction pour déconnecter l'utilisateur en réinitialisant l'état user.

Conclusion

Vous avez maintenant une solide compréhension de Context API et de son utilisation pour gérer l'état global dans une application React. Que ce soit pour gérer des thèmes, des informations utilisateur ou d'autres données globales, Context API est un outil puissant et facile à utiliser.

Pour continuer votre apprentissage, découvrez comment optimiser les performances de votre application React dans le chapitre suivant : Optimisation des Performances en React.