Zustandsverwaltung mit useContext und useReducer in React: Aufbau eines globalen Warenkorbs

Erweitertes Statusmanagement mit useContext und useReducer in React: Erstellen eines globalen Warenkorbs

Im vorherigen Artikel haben wir das Konzept der Kombination von useContext und useReducer vorgestellt, um den globalen Status in einer React-Anwendung effektiv zu verwalten. Wir haben dies demonstriert, indem wir eine einfache To-Do-Liste erstellt haben. Jetzt gehen wir einen Schritt weiter und wenden diese Konzepte auf ein komplexeres, reales Beispiel an – einen globalen Warenkorb.

In diesem Leitfaden erfahren Sie, wie Sie mehrere Status und Aktionen verwalten, z. B. das Hinzufügen, Aktualisieren und Entfernen von Elementen sowie das Berechnen von Gesamtsummen – und das alles unter Beibehaltung der Skalierbarkeit und Leistung der Anwendung.

In diesem zweiten Teil lernen Sie:

1. Behandeln Sie komplexere Zustände mit useReducer.
2. Erstellen Sie einen flexiblen Kontextanbieter, um Status und Aktionen global zu verwalten.
3. Erweiterte Reduzierfunktionen implementieren, um Berechnungen durchzuführen und verschiedene Arten von Aktionen zu verarbeiten.
4. Optimieren Sie die Komponentenleistung mit Memoisierung für eine bessere Leistung.

Lass uns eintauchen!

Projektübersicht: Ein globaler Einkaufswagen

Unsere Warenkorbanwendung enthält:

• Produktliste: Eine Reihe von Artikeln, die zum Warenkorb hinzugefügt werden können.
• Warenkorbfunktionalität: Benutzer können Artikel zum Warenkorb hinzufügen, aktualisieren und entfernen.
• Warenkorbsummen: Berechnen und zeigen Sie die Gesamtzahl der Artikel und den Gesamtpreis an.

Wir beginnen mit der Einrichtung des Kontexts und des Reduzierers und erstellen dann Komponenten, um die Funktionen zu präsentieren.

Setup und Anfangsdateien

Um zu beginnen, initialisieren Sie Ihr React-Projekt und richten Sie eine grundlegende Ordnerstruktur ein:

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

Schritt 1: Erstellen Sie den Anfangszustand und den Reduzierer

Wir beginnen mit einem Ausgangszustand, der einen leeren Warenkorb und eine Reihe von Beispielprodukten darstellt.

Anfangszustand:

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

Reduzierfunktion:

Wir richten eine CartReducer-Funktion ein, um verschiedene Aktionen wie das Hinzufügen von Artikeln, das Aktualisieren von Artikelmengen, das Entfernen von Artikeln und das Berechnen von Gesamtsummen durchzuführen.

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

Erläuterung

• ADD_TO_CART: Fügt einen Artikel zum Warenkorb hinzu und erhöht die Menge, falls er bereits vorhanden ist.
• REMOVE_FROM_CART: Entfernt einen Artikel basierend auf seiner ID.
• UPDATE_QUANTITY: Aktualisiert die Menge eines Artikels im Warenkorb.
• CALCULATE_TOTALS: Berechnet die Gesamtzahl der Artikel und den Gesamtpreis des Warenkorbs.

Schritt 2: Kontext und Anbieter erstellen

Jetzt erstellen wir einen Kontext und einen Anbieter, um unsere Status- und Versandfunktion global zu übergeben. Dadurch können alle Komponenten auf den Warenkorbstatus und die Aktionen zugreifen.

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

Schritt 3: Aufbau der Komponenten

Nachdem der Anbieter und der Kontext eingerichtet sind, können wir jetzt Komponenten für die Produktliste und den Warenkorb erstellen.

ProductList-Komponente

Die ProductList-Komponente zeigt eine Liste der verfügbaren Produkte an und ermöglicht Benutzern das Hinzufügen von Produkten zum Warenkorb.

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

Warenkorbkomponente

Die Warenkorbkomponente zeigt Artikel im Warenkorb an, ermöglicht das Aktualisieren von Mengen, das Entfernen von Artikeln und zeigt die Gesamtzahl der Artikel und den Preis an.

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

Erläuterung

• handleRemove: Entfernt einen Artikel aus dem Warenkorb.
• handleUpdateQuantity: Aktualisiert die Menge eines ausgewählten Artikels.
• Gesamtzahl der Artikel und Preis: Die Warenkorbkomponente zeigt die Gesamtzahl der Artikel und den Preis basierend auf den berechneten Werten im Bundesstaat an.

Schritt 4: Verpacken Sie die App mit dem Anbieter

Um sicherzustellen, dass alle Komponenten auf den Warenkorbstatus zugreifen können, schließen Sie die gesamte App in CartProvider ein.

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;

Letzte Handgriffe: Auswendiglernen und Optimieren

Wenn Ihre Anwendung wächst, ist die Optimierung der Leistung von entscheidender Bedeutung. Hier ein paar Tipps:

1. Komponenten merken: Verwenden Sie React.memo, um unnötiges erneutes Rendern von Komponenten zu verhindern, die vom Status abhängen.
2. Getrennte Kontexte: Erwägen Sie die Trennung von Produkt- und Warenkorbkontexten, wenn diese zu groß werden, um gezieltere Statusaktualisierungen zu ermöglichen.

Zusammenfassung und Fazit

In dieser erweiterten Anleitung haben wir useContext und useReducer verwendet, um einen globalen Warenkorb zu verwalten. Zu den wichtigsten Erkenntnissen gehören:

1. Komplexe Zustandsverwaltung: useReducer vereinfacht die Verwaltung komplexer Aktionen und Berechnungen.
2. Globaler Zustand mit useContext: Macht den Zustand im gesamten Komponentenbaum zugänglich.
3. Skalierbare Muster: Die Trennung von Zustand und Aktionen in Kontexten ermöglicht einen saubereren, modulareren Code.

Versuchen Sie, diesen Ansatz auf Ihre Projekte anzuwenden, und sehen Sie, wie er die Skalierbarkeit und Leistung Ihrer Anwendungen verbessert. Viel Spaß beim Codieren! ?

Das obige ist der detaillierte Inhalt vonZustandsverwaltung mit useContext und useReducer in React: Aufbau eines globalen Warenkorbs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!