Mengurus Keadaan Global dan Berterusan dengan API Konteks dalam React

Mengurus keadaan global ialah ciri penting dalam banyak aplikasi. Ia biasanya digunakan untuk tugas seperti mengendalikan data log masuk pengguna atau mengawal tema apl.
Selain itu, keadaan berterusan menyegarkan halaman adalah penting untuk memastikan pengalaman pengguna yang konsisten.
Dalam artikel ini, saya akan menunjukkan pendekatan mudah untuk mencapai pengurusan keadaan global dan berterusan menggunakan API Konteks, dengan contoh praktikal kawalan tema.

Pelan hala tuju

Langkah 1: Cipta ThemeContext.tsx

Dalam fail ini, kami mencipta ThemeContext untuk mengurus keadaan berkaitan tema secara global. Kami juga mentakrifkan cangkuk tersuai, useThemeContext, untuk memudahkan akses kepada konteks dalam komponen.

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

Langkah 2: Cipta ThemeProvider.tsx

Komponen ThemeProvider menyediakan ThemeContext kepada anak-anaknya dan mengendalikan perubahan keadaan tema.

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

Langkah 3: Balut Apl dalam ThemeProvider

Akhir sekali, balut komponen Apl dengan ThemeProvider dalam main.tsx untuk mendayakan penggunaan konteks sepanjang aplikasi.

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

Langkah 4: Akses Nilai Konteks dalam Komponen

Dengan konteks yang disediakan, anda kini boleh mengakses nilai tema dan fungsi togol dalam komponen anda.

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

Kesimpulan

Pendekatan ini menunjukkan cara mengurus keadaan global dan berterusan menggunakan API Konteks. Anda kini boleh menyesuaikan kaedah ini untuk kes penggunaan lain seperti pengesahan pengguna atau tetapan bahasa.

Atas ialah kandungan terperinci Mengurus Keadaan Global dan Berterusan dengan API Konteks dalam React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!