Gestion de l'état global et persistant avec l'API contextuelle dans React

La gestion de l'état global est une fonctionnalité essentielle dans de nombreuses applications. Il est couramment utilisé pour des tâches telles que la gestion des données de connexion des utilisateurs ou le contrôle du thème de l'application.
De plus, la persistance de l’état lors des actualisations de page est cruciale pour garantir une expérience utilisateur cohérente.
Dans cet article, je vais démontrer une approche simple pour parvenir à une gestion globale et persistante de l'état à l'aide de l'API Context, avec un exemple pratique de contrôle de thème.

Feuille de route

Étape 1 : Créer ThemeContext.tsx

Dans ce fichier, nous créons le ThemeContext pour gérer globalement l'état lié au thème. Nous définissons également un hook personnalisé, useThemeContext, pour simplifier l'accès au contexte dans les composants.

import { createContext, useContext } from "react";

// Define context type
interface ThemeContextType {
  isDarkMode: boolean;
  toggleTheme: () => void;
}

// Create context
export const ThemeContext = createContext<ThemeContextType | undefined>(undefined);

// Create custom hook to access
export const useThemeContext = () => {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error("useTheme must be used within a ThemeProvider");
  }
  return context;
};

Étape 2 : Créer ThemeProvider.tsx

Le composant ThemeProvider fournit le ThemeContext à ses enfants et gère les changements d'état du thème.

import React, { useState } from "react";
import { ThemeContext } from "./ThemeContext";

export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [isDarkMode, setIsDarkMode] = useState(false);

  const toggleTheme = () => {
    const newTheme = !isDarkMode ? "dark" : "light";
    // Change state value
    setIsDarkMode(!isDarkMode);
    // Save value to local storage
    // Toggle "dark" class in html element
    localStorage.setItem("theme", newTheme);
    document.documentElement.classList.toggle("dark", !isDarkMode);
  };

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

Étape 3 : Encapsuler l'application dans le ThemeProvider

Enfin, enveloppez le composant App avec ThemeProvider dans main.tsx pour permettre l'utilisation du contexte dans toute l'application.

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.tsx'
import { ThemeProvider } from './context/ThemeProvider.tsx'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <ThemeProvider>
      <App />
    </ThemeProvider>
  </StrictMode>,
)

Étape 4 : accéder aux valeurs de contexte dans les composants

Une fois le contexte configuré, vous pouvez désormais accéder aux valeurs du thème et basculer la fonction dans vos composants.

import { useThemeContext } from '@/context/ThemeContext';

function App() {
  const { isDarkMode, toggleTheme } = useThemeContext();

  return (
    <div>
      <p>isdarkMode: {isDarkMode}</p>
      <button onclick={toggleTheme}>Toggle Theme</button>
    </div>
  )
}

export default App

Conclusion

Cette approche montre comment gérer l'état global et persistant à l'aide de l'API Context. Vous pouvez désormais adapter cette méthode à d'autres cas d'utilisation comme l'authentification des utilisateurs ou les paramètres de langue.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!