Gestion de l'état avec useContext et useReducer dans React : création d'un panier d'achat global

Gestion avancée de l'état avec useContext et useReducer dans React : création d'un panier d'achat global

Dans l'article précédent, nous avons introduit le concept de combinaison de useContext et useReducer pour gérer efficacement l'état global dans une application React. Nous l’avons démontré en créant une simple liste de tâches. Nous allons maintenant aller plus loin et appliquer ces concepts à un exemple concret plus complexe : un panier d'achat global.

Ce guide expliquera comment gérer plusieurs états et actions, tels que l'ajout, la mise à jour et la suppression d'éléments, ainsi que le calcul des totaux, tout en gardant l'application évolutive et performante.

Dans cette deuxième partie, vous apprendrez à :

1. Gérer des états plus complexes à l'aide de useReducer.
2. Créez un fournisseur de contexte flexible pour gérer l'état et les actions à l'échelle mondiale.
3. Implémentez des fonctions de réduction avancées pour effectuer des calculs et gérer différents types d'actions.
4. Optimisez les performances des composants avec la mémorisation pour de meilleures performances.

Plongeons-nous !

Aperçu du projet : un panier d'achat mondial

Notre application de panier d'achat aura :

• Liste de produits : Un ensemble d'articles disponibles à ajouter au panier.
• Fonctionnalité du panier : les utilisateurs peuvent ajouter, mettre à jour et supprimer des articles dans le panier.
• Totaux du panier : Calculez et affichez le total des articles et le prix total.

Nous commencerons par configurer le contexte et le réducteur, puis créerons des composants pour présenter les fonctionnalités.

Fichiers d'installation et initiaux

Pour commencer, initialisez votre projet React et configurez une structure de dossiers de base :

src/
├── CartContext.js
├── CartProvider.js
├── ProductList.js
├── Cart.js
└── App.js

Étape 1 : Créer l'état initial et le réducteur

Nous commencerons par un état initial qui représente un panier vide et un ensemble d'échantillons de produits.

État initial :

// Initial state structure
const initialState = {
  products: [
    { id: 1, name: "Product A", price: 30 },
    { id: 2, name: "Product B", price: 20 },
    { id: 3, name: "Product C", price: 50 }
  ],
  cart: [],
  totalItems: 0,
  totalPrice: 0
};

Fonction réducteur :

Nous allons configurer une fonction cartReducer pour gérer diverses actions telles que l'ajout d'articles, la mise à jour des quantités d'articles, la suppression d'articles et le calcul des totaux.

src/
├── CartContext.js
├── CartProvider.js
├── ProductList.js
├── Cart.js
└── App.js

Explication

• ADD_TO_CART : Ajoute un article au panier, en augmentant la quantité s'il existe déjà.
• REMOVE_FROM_CART : Supprime un élément en fonction de son ID.
• UPDATE_QUANTITY : Met à jour la quantité d'un article dans le panier.
• CALCULATE_TOTALS : Calcule le nombre total d'articles et le prix total du panier.

Étape 2 : Créer un contexte et un fournisseur

Maintenant, nous allons créer un contexte et un fournisseur pour transmettre notre fonction d'état et de répartition à l'échelle mondiale. Cela permettra à tous les composants d'accéder à l'état et aux actions du panier.

CartContext.js

// Initial state structure
const initialState = {
  products: [
    { id: 1, name: "Product A", price: 30 },
    { id: 2, name: "Product B", price: 20 },
    { id: 3, name: "Product C", price: 50 }
  ],
  cart: [],
  totalItems: 0,
  totalPrice: 0
};

Étape 3 : Construire les composants

Une fois le fournisseur et le contexte configurés, nous pouvons maintenant créer des composants pour la Liste de produits et le Panier.

Composant Liste de produits

Le composant ProductList affichera une liste des produits disponibles et permettra aux utilisateurs d'ajouter des produits au panier.

ProductList.js

function cartReducer(state, action) {
  switch (action.type) {
    case "ADD_TO_CART": {
      const item = state.cart.find(item => item.id === action.payload.id);
      const updatedCart = item
        ? state.cart.map(cartItem =>
            cartItem.id === item.id
              ? { ...cartItem, quantity: cartItem.quantity + 1 }
              : cartItem
          )
        : [...state.cart, { ...action.payload, quantity: 1 }];

      return { ...state, cart: updatedCart };
    }

    case "REMOVE_FROM_CART": {
      const updatedCart = state.cart.filter(item => item.id !== action.payload);
      return { ...state, cart: updatedCart };
    }

    case "UPDATE_QUANTITY": {
      const updatedCart = state.cart.map(item =>
        item.id === action.payload.id
          ? { ...item, quantity: action.payload.quantity }
          : item
      );
      return { ...state, cart: updatedCart };
    }

    case "CALCULATE_TOTALS": {
      const { totalItems, totalPrice } = state.cart.reduce(
        (totals, item) => {
          totals.totalItems += item.quantity;
          totals.totalPrice += item.price * item.quantity;
          return totals;
        },
        { totalItems: 0, totalPrice: 0 }
      );
      return { ...state, totalItems, totalPrice };
    }

    default:
      return state;
  }
}

Composant du panier

Le composant Panier affiche les articles dans le panier, permet de mettre à jour les quantités, de supprimer des articles et affiche le total des articles et le prix.

Cart.js

import React, { createContext, useReducer } from 'react';

export const CartContext = createContext();

export function CartProvider({ children }) {
  const [state, dispatch] = useReducer(cartReducer, initialState);

  return (
    <CartContext.Provider value={{ state, dispatch }}>
      {children}
    </CartContext.Provider>
  );
}

Explication

• handleRemove : Supprime un article du panier.
• handleUpdateQuantity : met à jour la quantité d'un article sélectionné.
• Total des articles et prix : le composant panier affiche le total des articles et le prix en fonction des valeurs calculées dans l'état.

Étape 4 : Encapsuler l'application avec le fournisseur

Pour vous assurer que tous les composants peuvent accéder à l'état du panier, enveloppez l'intégralité de l'application dans CartProvider.

App.js

import React, { useContext } from 'react';
import { CartContext } from './CartContext';

function ProductList() {
  const { state, dispatch } = useContext(CartContext);

  const handleAddToCart = (product) => {
    dispatch({ type: "ADD_TO_CART", payload: product });
    dispatch({ type: "CALCULATE_TOTALS" });
  };

  return (
    <div>
      <h2>Products</h2>
      <ul>
        {state.products.map(product => (
          <li key={product.id}>
            {product.name} - ${product.price}
            <button onClick={() => handleAddToCart(product)}>Add to Cart</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default ProductList;

Touches finales : mémorisation et optimisation

À mesure que votre application se développe, l'optimisation des performances est essentielle. Voici quelques conseils :

1. Memoize Components : utilisez React.memo pour éviter les rendus inutiles de composants qui dépendent de l'état.
2. Contextes séparés : envisagez de séparer les contextes de produit et de panier s'ils deviennent trop volumineux, ce qui permet des mises à jour d'état plus ciblées.

Récapitulatif et conclusion

Dans ce guide avancé, nous avons utilisé useContext et useReducer pour gérer un panier global. Les principaux points à retenir :

1. Gestion d'état complexe : useReducer simplifie la gestion des actions et des calculs complexes.
2. État global avec useContext : rend l'état accessible dans l'arborescence des composants.
3. Modèles évolutifs : la séparation de l'état et des actions dans des contextes permet d'obtenir un code plus propre et plus modulaire.

Essayez d'appliquer cette approche à vos projets et voyez comment elle améliore l'évolutivité et les performances de vos applications. Bon codage ! ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!