Læsere som dig hjælper med at støtte MUO. Når du foretager et køb ved hjælp af links på vores websted, kan vi optjene en affiliate-kommission. Læs mere.

En indkøbskurv er en væsentlig del af enhver e-handelsside. Det giver kunderne mulighed for at opbevare og købe produkter.

I en Next.js e-handelsapp kan du bruge Context API og useReducer-krogen til at oprette en indkøbsvogn. Kontekst-API'en forenkler deling af vogndata mellem komponenter, mens useReducer håndterer vogntilstanden.

Oprettelse af produktsiden

I sidemappen skal du oprette en ny fil kaldet Product.jsx, der gengiver et enkelt produkt.

eksportStandardfungereProdukt({id, navn, pris}) {
Vend tilbage (


{navn}</p>


{pris}</p>

Produktkomponenten accepterer id, navn og pris på et produkt og viser det. Den har også en "Læg ​​i kurv"-knap.

Når et produkt allerede er tilføjet i indkøbskurven, skal knappen skifte til en "fjern fra indkøbskurv"-knap, og hvis et produkt ikke er i indkøbskurven, skal siden vise knappen "Tilføj til indkøbskurv".

instagram viewer

For at implementere denne funktionalitet skal du holde styr på varerne i indkøbskurven ved hjælp af kontekst API og useReducer krogen.

Oprettelse af en indkøbskurv ved hjælp af Context API

Kontekst-API'en lader dig dele data på tværs af forskellige komponenter uden at skulle videregive rekvisitter manuelt fra forælder til barn. Disse komponenter kan være navigationslinjen, siden med produktdetaljer eller betalingssiden.

Opret en ny fil kaldet cartContext.js i en mappe kaldet kontekst og opret konteksten.

importere { createContext } fra"reagere";
eksportkonst CartContext = createContext({
 elementer: [],
});

CartContext tager en række elementer som standardværdi.

Opret derefter kontekstudbyderen. En kontekstudbyder tillader komponenter, der bruger konteksten, at abonnere på kontekstændringer.

Tilføj følgende i en ny funktion kaldet cartProvider:

eksportkonst CartProvider = ({ børn }) => {
Vend tilbage<CartContext. Udbyder>{børn}CartContext. Udbyder>;
};

For at holde styr på varerne i kurven skal du bruge useReducer krogen.

UseReducer-krogen fungerer som useState-krogen, bortset fra at den hjælper med at administrere mere kompleks tilstandslogik. Den accepterer en reduktionsfunktion og den oprindelige tilstand. Den returnerer den aktuelle tilstand og en afsendelsesfunktion, som overfører en handling til reduktionsfunktionen.

Opret en ny funktion kaldet CartReducer og tilføj reduceren.

konst cartReducer = (tilstand, handling) => {
konst { type, nyttelast } = handling;
kontakt (type) {
sag"TILFØJE":
Vend tilbage {
 ...stat,
 varer: payload.items,
 };


sag"FJERNE":
Vend tilbage {
 ...stat,
 varer: payload.items,
 };
Standard:
kastenyFejl("Ingen sag for den type");
 }
};

Reduktionsfunktionen omfatter en switch-sætning, der opdaterer tilstanden afhængigt af typen af ​​handling. Kurvreduktionsfunktionen har "ADD" og "FJERN" handlinger, der henholdsvis føjer til vognen og fjerner fra vognen.

Når du har oprettet reduceringsfunktionen, skal du bruge den i useReducer krogen. Start med at oprette CartProvider-funktionen. Dette er den funktion, der giver konteksten til andre komponenter.

eksportkonst CartProvider = ({børn}) => {
Vend tilbage<CartContext. Udbyder>{børn}CartContext. Udbyder>;
}

Opret derefter useReducer-krogen.

eksportkonst CartProvider = ({ børn }) => {
konst [state, afsendelse] = useReducer (cartReducer, { genstande: [] });
Vend tilbage<CartContext. Udbyder>{børn}CartContext. Udbyder>;
};

Afsendelsesfunktionen er ansvarlig for at opdatere vognens tilstand, så modificer CartProvider-funktionen til at inkludere funktioner, der sender produkter til useReducer-krogen, når vognen opdateres.

importere { createContext, useReducer } fra"reagere";
eksportkonst CartProvider = ({ børn }) => {
konst [state, afsendelse] = useReducer (cartReducer, initialState);


konst addToCart = (produkt) => {
konst updatedCart = [...stat.varer, produkt];


 afsendelse({
 type: "TILFØJE",
 nyttelast: {
 varer: updatedCart,
 },
 });
 };


konst removeFromCart = (id) => {
konst updatedCart = state.items.filter(
 (currentProduct) => currentProduct.id !== id
 );


 afsendelse({
 type: "FJERNE",
 nyttelast: {
 varer: updatedCart,
 },
 });
 };
Vend tilbage<CartContext. Udbyder>{børn}CartContext. Udbyder>;
};

AddToCart-funktionen tilføjer det nye produkt til de eksisterende produkter og returnerer de opdaterede produkter i afsendelsesfunktionens nyttelastobjekt. På samme måde filtrerer funktionen removeFromCart varen fra efter ID og returnerer den opdaterede liste.

Du skal også returnere værdien i CartContext-udbyderen.

eksportkonst CartProvider = ({ børn }) => {
konst [state, afsendelse] = useReducer (cartReducer, {
 elementer: [],
 });
konst addToCart = (produkt) => {};
konst removeFromCart = (id) => {};


konst værdi = {
 varer: state.items,
 Tilføj til kurv,
 fjern fra kurv,
 };
Vend tilbage<CartContext. Udbyderværdi={værdi}>{børn}CartContext. Udbyder>;
}

Værdipropen forbruges via useContext-krogen.

Forbruger kurvens kontekst

Indtil videre har du oprettet vognkonteksten og oprettet en useReducer-funktion, der opdaterer vognen. Dernæst bruger du kurvkonteksten i produktkomponenten ved hjælp af useContext-krogen.

Start med at indpakke index.js, den øverste komponent, med kontekstudbyderen for at gøre kontekstværdierne tilgængelige på tværs af hele applikationen.

importere { CartProvider } fra"../context/cartContext";
fungereMin App({ Komponent, pageProps }) {
Vend tilbage (


 </CartProvider>
 );
}
eksportStandard MinApp;

Importer derefter useContext-krogen og indkøbskurv-kontekstudbyderen i Product.js

importere { useContext } fra"reagere"
importere { CartContext } fra"../context/cartContext"
eksportStandardfungereProdukt() {
konst {items, addToCart, removeFromCart} = useContext (CartContext)
Vend tilbage (
 <>


{navn}</p>


{pris}</p>

Knapfunktionen afhænger af, om varen allerede ligger i indkøbskurven. Hvis en vare findes i indkøbskurven, skal knappen fjerne den fra indkøbskurven, og hvis en vare ikke allerede er i indkøbskurven, skal den tilføje den. Det betyder, at du skal holde styr på varens tilstand ved hjælp af useEffect og useState. UseEffect-koden kontrollerer, om varen er i kurven, efter at komponenten er gengivet, mens useState opdaterer varens tilstand.

konst [exists, setExists] = useState(falsk);
useEffect(() => {
konst inCart = items.find((vare) => item.id id);
hvis (inCart) {
 sætEksister(rigtigt);
 } andet {
 sætEksister(falsk);
 } 
}, [varer, id]);

Nu, bruge betinget gengivelse for at vise knappen baseret på den eksisterende tilstand.

Vend tilbage (


{navn}</p>


{pris}</p>
 {
 eksisterer
? <knappåKlik={() => removeFromCart (id)}>Fjern fra indkøbsvognknap>
: <knappåKlik={() => addToCart({id, name, price})}>Læg i kurvknap>
 }
 </div>
)

Bemærk, at onClick-håndteringsfunktionerne er funktionerne removeFromCart og addToCart, der er defineret i kontekstudbyderen.

Tilføjelse af mere funktionalitet til kurven

Du har lært, hvordan du opretter en indkøbskurv ved hjælp af kontekst-API'en og useReducer-krogen.

Selvom denne vejledning kun dækkede tilføjelse og fjernelse af funktionalitet, kan du bruge de samme koncepter til at tilføje flere funktioner som f.eks. justering af mængden af ​​varer i kurven. Det afgørende er at forstå kontekst-API'en, og hvordan man bruger kroge til at opdatere kurvdetaljerne.