إدارة الحالة في React

تُعدّ إدارة الحالة جانبًا بالغ الأهمية في تطبيقات React. سنستعرض في هذا الدرس مقاربات مختلفة لإدارة الحالة العامة لتطبيقك.

Context API

إنشاء سياق

import { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

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

// Hook personnalisé pour utiliser le contexte
function useTheme() {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error('useTheme doit être utilisé dans un ThemeProvider');
  }
  return context;
}

استخدام السياق

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

function ThemeToggle() {
  const { theme, setTheme } = useTheme();

  return (
    <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
      Changer le thème
    </button>
  );
}

Redux Toolkit

التثبيت

npm install @reduxjs/toolkit react-redux