Een winkelwagentje is een essentieel onderdeel van elke e-commercesite. Hiermee kunnen klanten producten opslaan en kopen.
In een Next.js e-commerce-app kunt u de Context API en de useReducer-hook gebruiken om een winkelwagentje te maken. De context-API vereenvoudigt het delen van winkelwagengegevens tussen componenten, terwijl useReducer de winkelwagenstatus afhandelt.
De productpagina maken
Maak in de map Pages een nieuw bestand met de naam Product.jsx dat één product weergeeft.
exporterenstandaardfunctieProduct({id, naam, prijs}) {
opbrengst (
{naam}</p>
{prijs}</p>
De productcomponent accepteert de ID, naam en prijs van een product en geeft deze weer. Het heeft ook een knop "Toevoegen aan winkelwagen".
Wanneer een product al aan de winkelwagen is toegevoegd, moet de knop overschakelen naar een knop "verwijderen uit winkelwagen" en als een product niet in de winkelwagen zit, moet de pagina de knop "Toevoegen aan winkelwagen" weergeven.
Om deze functionaliteit te implementeren, moet u de items in de winkelwagen bijhouden met behulp van de context-API en de useReducer-haak.
Een winkelwagentje maken met behulp van de Context API
Met de context-API kunt u gegevens over verschillende componenten delen zonder dat u rekwisieten handmatig van ouder naar kind hoeft door te geven. Deze componenten kunnen de navigatiebalk, de pagina met productdetails of de afrekenpagina zijn.
Maak een nieuw bestand met de naam cartContext.js in een map met de naam context en maak de context.
importeren { creëerContext } van"Reageer";
exporterenconst CartContext = createContext({
artikelen: [],
});
CartContext neemt een reeks items als standaardwaarde.
Maak vervolgens de contextprovider. Een contextprovider staat componenten die de context gebruiken toe om zich te abonneren op contextveranderingen.
Voeg in een nieuwe functie met de naam cartProvider het volgende toe:
exporterenconst WinkelwagenProvider = ({ kinderen }) => {
opbrengst<CartContext. Aanbieder>{kinderen}CartContext. Aanbieder>;
};
Om de items in de winkelwagen bij te houden, gebruikt u de useReducer-haak.
De useReducer-hook werkt als de useState-hook, behalve dat het helpt bij het beheren van meer complexe toestandslogica. Het accepteert een verloopfunctie en de begintoestand. Het retourneert de huidige status en een verzendfunctie die een actie doorgeeft aan de reducer-functie.
Maak een nieuwe functie met de naam CartReducer en voeg de reducer toe.
const winkelwagenVerminderaar = (staat, actie) => {
const { type, lading } = actie;schakelaar (typ) {
geval"TOEVOEGEN":
opbrengst {
...staat,
items: payload.items,
};geval"VERWIJDEREN":
opbrengst {
...staat,
items: payload.items,
};
standaard:
gooiennieuwFout("Geen koffer voor dat type");
}
};
De reducer-functie omvat een switch-instructie die de status bijwerkt, afhankelijk van het type actie. De functie voor het verkleinen van de winkelwagen heeft acties "TOEVOEGEN" en "VERWIJDEREN" die respectievelijk toevoegen aan de winkelwagen en verwijderen uit de winkelwagen.
Nadat je de reducer-functie hebt gemaakt, gebruik je deze in de useReducer-hook. Begin met het maken van de CartProvider-functie. Dit is de functie die de context zal bieden aan andere componenten.
exporterenconst WinkelwagenProvider = ({kinderen}) => {
opbrengst<CartContext. Aanbieder>{kinderen}CartContext. Aanbieder>;
}
Maak vervolgens de useReducer-haak.
exporterenconst WinkelwagenProvider = ({ kinderen }) => {
const [staat, verzending] = useReducer (cartReducer, { artikelen: [] });
opbrengst<CartContext. Aanbieder>{kinderen}CartContext. Aanbieder>;
};
De verzendfunctie is verantwoordelijk voor het bijwerken van de winkelwagenstatus, dus wijzig de CartProvider-functie om functies op te nemen die producten naar de useReducer-hook verzenden wanneer de winkelwagen wordt bijgewerkt.
importeren { createContext, gebruikReducer} van"Reageer";exporterenconst WinkelwagenProvider = ({ kinderen }) => {
const [staat, verzending] = useReducer (cartReducer, initialState);const addToCart = (Product) => {
const updatedCart = [...state.items, product];verzenden({
type: "TOEVOEGEN",
laadvermogen: {
artikelen: bijgewerktWinkelwagen,
},
});
};const removeFromCart = (ID kaart) => {
const updatedCart = staat.items.filter(
(currentProduct) => currentProduct.id !== id
);verzenden({
type: "VERWIJDEREN",
laadvermogen: {
artikelen: bijgewerktWinkelwagen,
},
});
};
opbrengst<CartContext. Aanbieder>{kinderen}CartContext. Aanbieder>;
};
De functie addToCart voegt het nieuwe product toe aan de bestaande producten en retourneert de bijgewerkte producten in het payload-object van de verzendfunctie. Evenzo filtert de functie removeFromCart het item op ID en retourneert de bijgewerkte lijst.
U moet ook de waardeprop retourneren in de CartContext-provider.
exporterenconst WinkelwagenProvider = ({ kinderen }) => {
const [staat, verzending] = useReducer (cartReducer, {
artikelen: [],
});const addToCart = (Product) => {};
const removeFromCart = (ID kaart) => {};const waarde = {
items: staat.items,
Voeg toe aan winkelkar,
verwijderVanCart,
};
opbrengst<CartContext. Aanbiederwaarde={waarde}>{kinderen}CartContext. Aanbieder>;
}
De value prop wordt geconsumeerd via de useContext hook.
De winkelwagencontext consumeren
Tot nu toe heb je de winkelwagencontext gemaakt en een useReducer-functie gemaakt die de winkelwagen bijwerkt. Vervolgens consumeer je de winkelwagencontext in de productcomponent met behulp van de useContext-hook.
Begin met het omwikkelen van index.js, de bovenste component, met de contextprovider om de contextwaarden beschikbaar te maken voor de hele applicatie.
importeren { CartProvider } van"../context/cartContext";functieMijnApp({ Component, paginaProps }) {
opbrengst (
</CartProvider>
);
}
exporterenstandaard MijnApp;
Importeer vervolgens de useContext-hook en de winkelwagencontextprovider in Product.js
importeren { gebruikContext } van"Reageer"
importeren { CartContext } van"../context/cartContext"exporterenstandaardfunctieProduct() {
const {items, addToCart, removeFromCart} = useContext (CartContext)
opbrengst (
<>{naam}</p>
{prijs}</p>
De knopfunctie is afhankelijk van of het artikel al in de winkelwagen zit. Als er een item in de winkelwagen zit, zou de knop het uit de winkelwagen moeten verwijderen en als een item nog niet in de winkelwagen zit, zou hij het moeten toevoegen. Dit betekent dat u de status van het item moet bijhouden met behulp van useEffect en useState. De useEffect-code controleert of het artikel zich in de winkelwagen bevindt nadat de component is weergegeven, terwijl useState de status van het artikel bijwerkt.
const [bestaat, setExists] = useState(vals);gebruikEffect(() => {
const inCart = items.find((item) => item.id id);
als (in winkelmandje) {
stelBestaat(WAAR);
} anders {
stelBestaat(vals);
}
}, [items, id]);
Nu, voorwaardelijke weergave gebruiken om de knop weer te geven op basis van de bestaande status.
opbrengst (
{naam}</p>
{prijs}</p>
{
bestaat
? <knopbij klikken={() => removeFromCart (id)}>Verwijderen uit winkelwagenknop>
: <knopbij klikken={() => addToCart({id, naam, prijs})}>Toevoegen aan winkelwagenknop>
}
</div>
)
Merk op dat de onClick-handlerfuncties de removeFromCart- en addToCart-functies zijn die zijn gedefinieerd in de contextprovider.
Meer functionaliteit toevoegen aan de winkelwagen
U hebt geleerd hoe u een winkelwagentje kunt maken met behulp van de context-API en de useReducer-hook.
Hoewel deze handleiding alleen functionaliteit voor het toevoegen en verwijderen behandelde, kunt u dezelfde concepten gebruiken om meer functies toe te voegen, zoals het aanpassen van het aantal winkelwagenitems. Het cruciale is om de context-API te begrijpen en hoe hooks te gebruiken om de winkelwagendetails bij te werken.