En kundvagn är en viktig del av alla e-handelssidor. Det tillåter kunder att lagra och köpa produkter.
I en Next.js e-handelsapp kan du använda Context API och useReducer-kroken för att skapa en kundvagn. Kontext-API: et förenklar delning av vagndata mellan komponenter medan useReducer hanterar vagntillståndet.
Skapa produktsidan
Skapa en ny fil som heter Product.jsx i pages-mappen som renderar en enskild produkt.
exporterastandardfungeraProdukt({id, name, price}) {
lämna tillbaka (
{name}</p>
{price}</p>
Produktkomponenten accepterar ID, namn och pris för en produkt och visar det. Den har också en "Lägg i kundvagn"-knapp.
När en produkt redan har lagts till i kundvagnen ska knappen byta till en "ta bort från varukorgen"-knapp och om en produkt inte finns i varukorgen ska sidan visa knappen "Lägg till i varukorgen".
För att implementera den här funktionen måste du hålla reda på varorna i kundvagnen
med hjälp av context API och användningsreducerkroken.Skapa en kundvagn med hjälp av Context API
Kontext-API: et låter dig dela data mellan olika komponenter utan att behöva överföra rekvisita manuellt från förälder till barn. Dessa komponenter kan vara navigeringsfältet, produktinformationssidan eller kassasidan.
Skapa en ny fil som heter cartContext.js i en mapp som heter context och skapa sammanhanget.
importera { createContext } från"reagera";
exporterakonst CartContext = createContext({
objekt: [],
});
CartContext tar en array av objekt som standardvärde.
Skapa sedan kontextleverantören. En kontextleverantör tillåter komponenter som konsumerar sammanhanget att prenumerera på kontextändringar.
Lägg till följande i en ny funktion som heter cartProvider:
exporterakonst CartProvider = ({ barn }) => {
lämna tillbaka<CartContext. Leverantör>{barn}CartContext. Leverantör>;
};
För att hålla reda på föremålen i kundvagnen använder du useReducer-kroken.
UseReducer-kroken fungerar som useState-kroken förutom att den hjälper till att hantera mer komplex tillståndslogik. Den accepterar en reducerfunktion och initialtillståndet. Den returnerar det aktuella tillståndet och en sändningsfunktion som skickar en åtgärd till reducerfunktionen.
Skapa en ny funktion som heter CartReducer och lägg till reduceraren.
konst cartReducer = (stat, handling) => {
konst { typ, nyttolast } = åtgärd;växla (typ) {
fall"LÄGG TILL":
lämna tillbaka {
...stat,
objekt: payload.items,
};fall"AVLÄGSNA":
lämna tillbaka {
...stat,
objekt: payload.items,
};
standard:
kastanyFel("Inga fall för den typen");
}
};
Reducerfunktionen består av en switch-sats som uppdaterar tillståndet beroende på typen av åtgärd. Funktionen för vagnreducerare har "LÄGG TILL" och "TA BORT" åtgärder som lägger till i vagnen respektive tar bort från vagnen.
När du har skapat reduceringsfunktionen, använd den i useReducer-kroken. Börja med att skapa CartProvider-funktionen. Det här är funktionen som ger sammanhanget till andra komponenter.
exporterakonst CartProvider = ({barn}) => {
lämna tillbaka<CartContext. Leverantör>{barn}CartContext. Leverantör>;
}
Skapa sedan useReducer-kroken.
exporterakonst CartProvider = ({ barn }) => {
konst [stat, utskick] = useReducer (cartReducer, { föremål: [] });
lämna tillbaka<CartContext. Leverantör>{barn}CartContext. Leverantör>;
};
Utsändningsfunktionen är ansvarig för att uppdatera kundvagnens tillstånd, så ändra CartProvider-funktionen så att den inkluderar funktioner som skickar produkter till useReducer-kroken när varukorgen uppdateras.
importera { createContext, useReducer } från"reagera";exporterakonst CartProvider = ({ barn }) => {
konst [tillstånd, sändning] = useReducer (cartReducer, initialState);konst addToCart = (produkt) => {
konst updatedCart = [...stat.artiklar, produkt];avsändande({
typ: "LÄGG TILL",
nyttolast: {
föremål: updatedCart,
},
});
};konst removeFromCart = (id) => {
konst updatedCart = state.items.filter(
(currentProduct) => currentProduct.id !== id
);avsändande({
typ: "AVLÄGSNA",
nyttolast: {
föremål: updatedCart,
},
});
};
lämna tillbaka<CartContext. Leverantör>{barn}CartContext. Leverantör>;
};
AddToCart-funktionen lägger till den nya produkten till de befintliga produkterna och returnerar de uppdaterade produkterna i nyttolastobjektet för avsändningsfunktionen. Likaså filtrerar removeFromCart-funktionen bort objektet efter ID och returnerar den uppdaterade listan.
Du måste också returnera värdepropet i CartContext-leverantören.
exporterakonst CartProvider = ({ barn }) => {
konst [stat, utskick] = useReducer (cartReducer, {
objekt: [],
});konst addToCart = (produkt) => {};
konst removeFromCart = (id) => {};konst värde = {
objekt: state.items,
Lägg till i kundvagn,
removeFromCart,
};
lämna tillbaka<CartContext. Leverantörvärde={värde}>{barn}CartContext. Leverantör>;
}
Värdepropet konsumeras via useContext-kroken.
Konsumerar varukorgskontexten
Hittills har du skapat kundvagnskontexten och skapat en useReducer-funktion som uppdaterar kundvagnen. Därefter konsumerar du kundvagnskontexten i produktkomponenten med hjälp av useContext-kroken.
Börja med att slå in index.js, den översta komponenten, med kontextleverantören för att göra sammanhangsvärdena tillgängliga i hela applikationen.
importera { CartProvider } från"../context/cartContext";fungeraMinApp({ Komponent, pageProps }) {
lämna tillbaka (
</CartProvider>
);
}
exporterastandard MinApp;
Importera sedan useContext-kroken och kundvagnskontextleverantören i Product.js
importera { useContext } från"reagera"
importera { CartContext } från"../context/cartContext"exporterastandardfungeraProdukt() {
konst {items, addToCart, removeFromCart} = useContext (CartContext)
lämna tillbaka (
<>{name}</p>
{price}</p>
Knappfunktionen beror på om varan redan ligger i varukorgen. Om en vara finns i varukorgen ska knappen ta bort den från varukorgen och om en vara inte redan finns i varukorgen ska den lägga till den. Detta innebär att du måste hålla reda på objektets tillstånd med useEffect och useState. UseEffect-koden kontrollerar om artikeln finns i kundvagnen efter att komponenten renderats medan useState uppdaterar artikelns tillstånd.
konst [exists, setExists] = useState(falsk);useEffect(() => {
konst inCart = items.find((Artikel) => item.id id);
om (inCart) {
setExists(Sann);
} annan {
setExists(falsk);
}
}, [artiklar, id]);
Nu, använda villkorlig rendering för att visa knappen baserat på det existerande tillståndet.
lämna tillbaka (
{name}</p>
{price}</p>
{
existerar
? <knapppåKlicka={() => removeFromCart (id)}>Ta bort från varukorgenknapp>
: <knapppåKlicka={() => addToCart({id, name, price})}>Lägg till i varukorgenknapp>
}
</div>
)
Observera att onClick-hanterarens funktioner är funktionerna removeFromCart och addToCart som definieras i kontextleverantören.
Lägger till mer funktionalitet i kundvagnen
Du har lärt dig hur du skapar en kundvagn med hjälp av context API och useReducer-kroken.
Även om den här guiden bara täckte lägga till och ta bort funktionalitet, kan du använda samma koncept för att lägga till fler funktioner som att justera mängden kundvagnsartiklar. Det avgörande är att förstå sammanhangets API och hur man använder krokar för att uppdatera kundvagnsdetaljerna.
