React の Context API を使用したグローバルおよび永続的な状態の管理

グローバル状態の管理は、多くのアプリケーションで不可欠な機能です。これは、ユーザーのログイン データの処理やアプリのテーマの制御などのタスクによく使用されます。
さらに、一貫したユーザー エクスペリエンスを確保するには、ページが更新されても状態を維持することが重要です。
この記事では、Context API を使用してグローバルで永続的な状態管理を実現するための簡単なアプローチを、テーマ コントロールの実践例とともに示します。

ロードマップ

ステップ 1: ThemeContext.tsx を作成する

このファイルでは、テーマ関連の状態をグローバルに管理するための ThemeContext を作成します。また、コンポーネント内のコンテキストへのアクセスを簡素化するために、カスタム フック useThemeContext も定義します。

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

ステップ 2: ThemeProvider.tsx を作成する

ThemeProvider コンポーネントは、その子に ThemeContext を提供し、テーマの状態の変更を処理します。

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

ステップ 3: ThemeProvider でアプリをラップする

最後に、main.tsx で App コンポーネントを ThemeProvider でラップして、アプリケーション全体でコンテキストを使用できるようにします。

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

ステップ 4: コンポーネントのコンテキスト値にアクセスする

コンテキストを設定すると、コンポーネントのテーマ値と切り替え機能にアクセスできるようになります。

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

結論

このアプローチは、Context API を使用してグローバルな永続的な状態を管理する方法を示します。この方法をユーザー認証や言語設定などの他のユースケースに適応できるようになりました。

以上がReact の Context API を使用したグローバルおよび永続的な状態の管理の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。