La Gestion d’État en React

La gestion d’état est un aspect crucial des applications React. Nous allons explorer différentes approches pour gérer l’état global de votre application.

Context API

Création d’un contexte

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

Utilisation du contexte

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

Installation

npm install @reduxjs/toolkit react-redux

Configuration du store

import { configureStore, createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
  },
});

const store = configureStore({
  reducer: {
    counter: counterSlice.reducer,
  },
});

export const { increment, decrement } = counterSlice.actions;
export default store;

Utilisation de Redux

import { Provider, useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './store';

function App() {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
}

function Counter() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <div>
      <button onClick={() => dispatch(decrement())}>-</button>
      <span>{count}</span>
      <button onClick={() => dispatch(increment())}>+</button>
    </div>
  );
}

Zustand

Installation

npm install zustand

Création d’un store

import create from 'zustand';

const useStore = create((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
}));

function BearCounter() {
  const bears = useStore((state) => state.bears);
  const increasePopulation = useStore((state) => state.increasePopulation);

  return (
    <div>
      <h1>{bears} ours</h1>
      <button onClick={increasePopulation}>Ajouter un ours</button>
    </div>
  );
}

Recoil

Installation

npm install recoil

Configuration et utilisation

import { RecoilRoot, atom, useRecoilState } from 'recoil';

const counterState = atom({
  key: 'counterState',
  default: 0,
});

function App() {
  return (
    <RecoilRoot>
      <Counter />
    </RecoilRoot>
  );
}

function Counter() {
  const [count, setCount] = useRecoilState(counterState);

  return (
    <div>
      <button onClick={() => setCount(count - 1)}>-</button>
      <span>{count}</span>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

Choisir la bonne solution

Context API

• Avantages :
  • Intégré à React
  • Simple à mettre en place
  • Parfait pour des états simples
• Inconvénients :
  • Peut causer des re-rendus inutiles
  • Pas optimisé pour les mises à jour fréquentes

Redux

• Avantages :
  • Écosystème mature
  • Outils de développement puissants
  • Bon pour les applications complexes
• Inconvénients :
  • Configuration initiale complexe
  • Beaucoup de boilerplate
  • Peut être excessif pour des applications simples

Zustand

• Avantages :
  • API simple et intuitive
  • Performance optimale
  • Bundle size minimal
• Inconvénients :
  • Communauté plus petite
  • Moins d’outils de développement

Recoil

• Avantages :
  • API atomique
  • Performance optimale
  • Intégration avec React
• Inconvénients :
  • Encore en développement
  • Moins mature que Redux

Bonnes Pratiques

1. Choix de la solution :

   • Commencez avec Context API pour des états simples
   • Utilisez Redux pour des applications complexes
   • Considérez Zustand pour des performances optimales
   • Explorez Recoil pour des applications modernes

2. Organisation :

   • Séparez la logique d’état
   • Utilisez des hooks personnalisés
   • Maintenez une structure claire

3. Performance :

   • Évitez les re-rendus inutiles
   • Utilisez la sélection sélective
   • Optimisez les mises à jour

Exercices pratiques

1. Créez une application de panier avec :

   • Gestion des produits
   • Calcul du total
   • Persistance des données
   • Historique des commandes

2. Créez un tableau de bord avec :

   • Filtres dynamiques
   • Statistiques en temps réel
   • Préférences utilisateur
   • Thèmes personnalisés

3. Créez une application de chat avec :

   • Messages en temps réel
   • État de connexion
   • Notifications
   • Historique des conversations

Conclusion

La gestion d’état est un aspect crucial des applications React. Dans le prochain chapitre, nous allons explorer les tests en React, qui permettent de garantir la qualité et la maintenabilité de votre code.