Ein Warenkorb ist ein wesentlicher Bestandteil jeder E-Commerce-Website. Es ermöglicht Kunden, Produkte zu speichern und zu kaufen.
In einer E-Commerce-App von Next.js können Sie die Context-API und den useReducer-Hook verwenden, um einen Einkaufswagen zu erstellen. Die Kontext-API vereinfacht die gemeinsame Nutzung von Warenkorbdaten zwischen Komponenten, während useReducer den Warenkorbstatus verarbeitet.
Erstellen der Produktseite
Erstellen Sie im Seitenordner eine neue Datei mit dem Namen Product.jsx, die ein einzelnes Produkt darstellt.
ExportStandardFunktionProdukt({ID, Name, Preis}) {
zurückkehren (
{Name}</p>
{Preis}</p>
Die Produktkomponente akzeptiert die ID, den Namen und den Preis eines Produkts und zeigt sie an. Es hat auch eine Schaltfläche "In den Warenkorb".
Wenn ein Produkt bereits zum Einkaufswagen hinzugefügt wurde, sollte die Schaltfläche zu einer Schaltfläche „Aus dem Einkaufswagen entfernen“ wechseln, und wenn sich ein Produkt nicht im Einkaufswagen befindet, sollte die Seite die Schaltfläche „In den Einkaufswagen“ anzeigen.
Um diese Funktion zu implementieren, müssen Sie die Artikel im Warenkorb verfolgen Verwenden der Kontext-API und der useReducer-Hook.
Erstellen eines Einkaufswagens mit der Kontext-API
Mit der Kontext-API können Sie Daten über verschiedene Komponenten hinweg freigeben, ohne Requisiten manuell von Eltern an Kinder weitergeben zu müssen. Diese Komponenten können die Navigationsleiste, die Produktdetailseite oder die Checkout-Seite sein.
Erstellen Sie eine neue Datei namens cartContext.js in einem Ordner namens context und erstellen Sie den Kontext.
importieren { Kontext erstellen } aus"reagieren";
Exportkonst CartContext = createContext({
Artikel: [],
});
CartContext verwendet ein Array von Elementen als Standardwert.
Erstellen Sie als Nächstes den Kontextanbieter. Ein Kontextanbieter ermöglicht es Komponenten, die den Kontext nutzen, Kontextänderungen zu abonnieren.
Fügen Sie in einer neuen Funktion namens cartProvider Folgendes hinzu:
Exportkonst CartProvider = ({ Kinder }) => {
zurückkehren<CartContext. Anbieter>{Kinder}CartContext. Anbieter>;
};
Um die Artikel im Warenkorb zu verfolgen, verwenden Sie den useReducer-Hook.
Der useReducer-Hook funktioniert wie der useState-Hook, außer dass er dabei hilft, eine komplexere Zustandslogik zu verwalten. Es akzeptiert eine Reduziererfunktion und den Anfangszustand. Es gibt den aktuellen Zustand und eine Dispatch-Funktion zurück, die eine Aktion an die Reducer-Funktion weiterleitet.
Erstellen Sie eine neue Funktion namens CartReducer und fügen Sie den Reducer hinzu.
konst cartReducer = (Zustand, Aktion) => {
konst { Typ, Nutzlast } = Aktion;schalten (Typ) {
Fall"HINZUFÜGEN":
zurückkehren {
...Zustand,
Artikel: payload.items,
};Fall"ENTFERNEN":
zurückkehren {
...Zustand,
Artikel: payload.items,
};
Standard:
WurfneuFehler("Kein Fall für diesen Typ");
}
};
Die Reducer-Funktion umfasst eine Switch-Anweisung, die den Zustand abhängig von der Art der Aktion aktualisiert. Die Funktion zum Reduzieren des Einkaufswagens verfügt über die Aktionen „HINZUFÜGEN“ und „ENTFERNEN“, die zum Einkaufswagen hinzufügen bzw. aus dem Einkaufswagen entfernen.
Nachdem Sie die Reducer-Funktion erstellt haben, verwenden Sie sie im useReducer-Hook. Beginnen Sie mit dem Erstellen der CartProvider-Funktion. Dies ist die Funktion, die den Kontext für andere Komponenten bereitstellt.
Exportkonst CartProvider = ({Kinder}) => {
zurückkehren<CartContext. Anbieter>{Kinder}CartContext. Anbieter>;
}
Erstellen Sie dann den useReducer-Hook.
Exportkonst CartProvider = ({ Kinder }) => {
konst [Zustand, Versand] = useReducer (cartReducer, { Artikel: [] });
zurückkehren<CartContext. Anbieter>{Kinder}CartContext. Anbieter>;
};
Die Dispatch-Funktion ist für die Aktualisierung des Einkaufswagenstatus verantwortlich. Ändern Sie also die CartProvider-Funktion so, dass sie Funktionen enthält, die Produkte an den useReducer-Hook senden, wenn der Einkaufswagen aktualisiert wird.
importieren { createContext, useReducer } aus"reagieren";Exportkonst CartProvider = ({ Kinder }) => {
konst [Zustand, Versand] = useReducer (cartReducer, initialState);konst addToCart = (Produkt) => {
konst updatedCart = [...state.items, product];versenden({
Typ: "HINZUFÜGEN",
Nutzlast: {
Artikel: aktualisiertWarenkorb,
},
});
};konst removeFromCart = (Ausweis) => {
konst aktualisiertCart = state.items.filter(
(aktuellesProdukt) => aktuelleProdukt.id !== id
);versenden({
Typ: "ENTFERNEN",
Nutzlast: {
Artikel: aktualisiertWarenkorb,
},
});
};
zurückkehren<CartContext. Anbieter>{Kinder}CartContext. Anbieter>;
};
Die addToCart-Funktion hängt das neue Produkt an die vorhandenen Produkte an und gibt die aktualisierten Produkte im Payload-Objekt der Dispatch-Funktion zurück. Ebenso filtert die Funktion removeFromCart den Artikel nach ID heraus und gibt die aktualisierte Liste zurück.
Sie müssen auch die Value-Prop im CartContext-Provider zurückgeben.
Exportkonst CartProvider = ({ Kinder }) => {
konst [Zustand, Versand] = useReducer (cartReducer, {
Artikel: [],
});konst addToCart = (Produkt) => {};
konst removeFromCart = (Ausweis) => {};konst Wert = {
Elemente: Zustand.Elemente,
in den Warenkorb legen,
AusWarenkorb entfernen,
};
zurückkehren<CartContext. AnbieterWert={Wert}>{Kinder}CartContext. Anbieter>;
}
Die Value-Prop wird über den useContext-Hook konsumiert.
Konsumieren des Cart-Kontexts
Bisher haben Sie den Einkaufswagenkontext erstellt und eine useReducer-Funktion erstellt, die den Einkaufswagen aktualisiert. Als Nächstes verwenden Sie den Cart-Kontext in der Produktkomponente mithilfe des useContext-Hooks.
Beginnen Sie damit, index.js, die oberste Komponente, mit dem Kontextanbieter zu umschließen, um die Kontextwerte in der gesamten Anwendung verfügbar zu machen.
importieren { CartProvider } aus"../context/cartContext";FunktionMeine App({ Komponente, pageProps }) {
zurückkehren (
</CartProvider>
);
}
ExportStandard Meine App;
Importieren Sie dann den useContext-Hook und den Cart-Context-Provider in Product.js
importieren { useContext } aus"reagieren"
importieren {CartContext} aus"../context/cartContext"ExportStandardFunktionProdukt() {
konst {Artikel, addToCart, removeFromCart} = useContext (CartContext)
zurückkehren (
<>{Name}</p>
{Preis}</p>
Die Funktion der Schaltfläche hängt davon ab, ob sich der Artikel bereits im Warenkorb befindet. Wenn ein Artikel im Warenkorb vorhanden ist, sollte die Schaltfläche ihn aus dem Warenkorb entfernen und wenn sich ein Artikel noch nicht im Warenkorb befindet, sollte er hinzugefügt werden. Das bedeutet, dass Sie den Status des Elements mithilfe von useEffect und useState verfolgen müssen. Der useEffect-Code prüft, ob sich der Artikel im Einkaufswagen befindet, nachdem die Komponente gerendert wurde, während useState den Zustand des Artikels aktualisiert.
konst [existiert, setExists] = useState(FALSCH);useEffect(() => {
konst inCart = items.find ((Artikel) => item.id id);
Wenn (im Wagen) {
setExistiert(WAHR);
} anders {
setExistiert(FALSCH);
}
}, [Elemente, ID]);
Jetzt, Verwenden Sie bedingtes Rendering um die Schaltfläche basierend auf dem Zustand „exists“ anzuzeigen.
zurückkehren (
{Name}</p>
{Preis}</p>
{
existiert
? <TasteonClick={() => removeFromCart (id)}>Aus Warenkorb entfernenTaste>
: <TasteonClick={() => addToCart({id, name, price})}>In den WarenkorbTaste>
}
</div>
)
Beachten Sie, dass die onClick-Handlerfunktionen die im Kontextanbieter definierten Funktionen removeFromCart und addToCart sind.
Hinzufügen von mehr Funktionalität zum Einkaufswagen
Sie haben gelernt, wie Sie mit der Kontext-API und dem useReducer-Hook einen Einkaufswagen erstellen.
Auch wenn in diesem Leitfaden nur die Funktionen zum Hinzufügen und Entfernen behandelt wurden, können Sie dieselben Konzepte verwenden, um weitere Funktionen hinzuzufügen, z. B. das Anpassen der Mengen von Einkaufswagenartikeln. Das Entscheidende ist, die Kontext-API zu verstehen und wie Hooks verwendet werden, um die Warenkorbdetails zu aktualisieren.
