Verwalten des globalen und dauerhaften Status mit der Kontext-API in React

Die Verwaltung des globalen Zustands ist in vielen Anwendungen eine wesentliche Funktion. Es wird häufig für Aufgaben wie die Verwaltung von Benutzeranmeldedaten oder die Steuerung des App-Designs verwendet.
Darüber hinaus ist die Beibehaltung des Status über Seitenaktualisierungen hinweg von entscheidender Bedeutung, um ein konsistentes Benutzererlebnis zu gewährleisten.
In diesem Artikel zeige ich einen einfachen Ansatz zum Erreichen einer globalen und dauerhaften Statusverwaltung mithilfe der Kontext-API anhand eines praktischen Beispiels für die Themensteuerung.

Roadmap

Schritt 1: ThemeContext.tsx erstellen

In dieser Datei erstellen wir den ThemeContext, um den themenbezogenen Status global zu verwalten. Wir definieren außerdem einen benutzerdefinierten Hook, useThemeContext, um den Zugriff auf den Kontext in Komponenten zu vereinfachen.

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;
};

Schritt 2: Erstellen Sie ThemeProvider.tsx

Die ThemeProvider-Komponente stellt den ThemeContext für ihre untergeordneten Elemente bereit und verarbeitet Themenstatusänderungen.

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>
  );
};

Schritt 3: Wickeln Sie die App in den ThemeProvider ein

Umschließen Sie abschließend die App-Komponente mit dem ThemeProvider in main.tsx, um die Kontextnutzung in der gesamten Anwendung zu ermöglichen.

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>,
)

Schritt 4: Zugriff auf Kontextwerte in Komponenten

Nachdem der Kontext eingerichtet ist, können Sie jetzt auf die Designwerte und die Umschaltfunktion in Ihren Komponenten zugreifen.

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

Abschluss

Dieser Ansatz zeigt, wie globale und persistente Zustände mithilfe der Kontext-API verwaltet werden. Sie können diese Methode jetzt für andere Anwendungsfälle wie Benutzerauthentifizierung oder Spracheinstellungen anpassen.

Das obige ist der detaillierte Inhalt vonVerwalten des globalen und dauerhaften Status mit der Kontext-API in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!