状態管理

状態管理はウェブアプリケーションの重要な側面の一つです。Remix では、React のコンテキストや外部の状態管理ライブラリを使用して状態を管理できます。このセクションでは、React Context を用いたグローバル状態管理の実装方法について、具体的な例を交えて説明します。

React Context による状態管理

ステップ 1: Context の作成

  • app/contexts/ThemeContext.jsxファイルを作成し、新しいコンテキストを定義します。
import React, { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

export 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 function useTheme() {
  return useContext(ThemeContext);
}
  • このコードは、テーマ（明るさや暗さ）をアプリケーション全体で管理するためのコンテキストを作成します。ThemeProviderコンポーネントを使用して、この状態をアプリケーションの他の部分で利用できるようにします。

ステップ 2: Context プロバイダーの適用

  • app/root.jsxファイルを編集し、ThemeProviderでアプリケーションをラップします。
import { ThemeProvider } from '~/contexts/ThemeContext';
import { Outlet } from 'remix';

function App() {
  return (
    <ThemeProvider>
      <Outlet />
    </ThemeProvider>
  );
}

export default App;

ステップ 3: Context の使用

  • 任意のコンポーネントでuseThemeフックを使用して、テーマを読み取り、切り替えることができます。
import { useTheme } from '~/contexts/ThemeContext';

export default function Header() {
  const { theme, toggleTheme } = useTheme();

  return (
    <header className={theme}>
      <h1>ウェブサイトのタイトル</h1>
      <button onClick={toggleTheme}>テーマ切替</button>
    </header>
  );
}
  • このコードスニペットでは、useThemeフックを使用して現在のテーマを取得し、ボタンクリックでテーマを切り替える機能を実装しています。