En handlekurv er en viktig del av enhver e-handelsside. Det lar kundene lagre og kjøpe produkter.
I en Next.js e-handelsapp kan du bruke Context API og useReducer-kroken til å lage en handlevogn. Kontekst-APIet forenkler deling av handlekurvdata mellom komponenter mens useReducer håndterer handlekurvtilstanden.
Opprette produktsiden
I pages-mappen oppretter du en ny fil kalt Product.jsx som gjengir et enkelt produkt.
eksportmisligholdefunksjonProdukt({id, name, price}) {
komme tilbake (
{navn}</p>
{pris}</p>
Produktkomponenten godtar ID, navn og pris på et produkt og viser det. Den har også en "Legg i handlekurv"-knapp.
Når et produkt allerede er lagt i handlekurven, skal knappen bytte til en "fjern fra handlekurv"-knapp, og hvis et produkt ikke er i handlekurven, skal siden vise "Legg i handlekurv"-knappen.
For å implementere denne funksjonaliteten, må du holde styr på varene i handlekurven
ved å bruke kontekst-API og bruksreduksjonskroken.Opprette en handlekurv ved å bruke Context API
Context API lar deg dele data på tvers av forskjellige komponenter uten å måtte sende rekvisitter manuelt fra forelder til barn. Disse komponentene kan være navigasjonslinjen, produktdetaljsiden eller betalingssiden.
Opprett en ny fil kalt cartContext.js i en mappe kalt kontekst og lag konteksten.
import { createContext } fra"reagere";
eksportkonst CartContext = createContext({
elementer: [],
});
CartContext tar en rekke elementer som standardverdi.
Deretter oppretter du kontekstleverandøren. En kontekstleverandør lar komponenter som bruker konteksten abonnere på kontekstendringer.
I en ny funksjon kalt cartProvider, legg til følgende:
eksportkonst CartProvider = ({ barn }) => {
komme tilbake<CartContext. Forsørger>{barn}CartContext. Forsørger>;
};
For å holde styr på varene i handlekurven, bruker du useReducer-kroken.
UseReducer-kroken fungerer som useState-kroken, bortsett fra at den hjelper til med å administrere mer kompleks tilstandslogikk. Den aksepterer en reduksjonsfunksjon og den opprinnelige tilstanden. Den returnerer gjeldende tilstand og en ekspedisjonsfunksjon som overfører en handling til reduksjonsfunksjonen.
Opprett en ny funksjon kalt CartReducer og legg til redusering.
konst cartReducer = (stat, handling) => {
konst { type, nyttelast } = handling;bytte om (type) {
sak"LEGG TIL":
komme tilbake {
...stat,
elementer: nyttelast.varer,
};sak"FJERNE":
komme tilbake {
...stat,
elementer: nyttelast.varer,
};
misligholde:
kastenyFeil("Ingen sak for den typen");
}
};
Reduksjonsfunksjonen omfatter en brytersetning som oppdaterer tilstanden avhengig av typen handling. Handlekurvreduksjonsfunksjonen har "LEGG TIL" og "FJERN"-handlinger som henholdsvis legger til handlekurven og fjerner fra handlekurven.
Etter å ha opprettet reduksjonsfunksjonen, bruk den i useReducer-kroken. Start med å lage CartProvider-funksjonen. Dette er funksjonen som gir konteksten til andre komponenter.
eksportkonst CartProvider = ({barn}) => {
komme tilbake<CartContext. Forsørger>{barn}CartContext. Forsørger>;
}
Deretter oppretter du useReducer-kroken.
eksportkonst CartProvider = ({ barn }) => {
konst [state, utsendelse] = brukReducer (cartReducer, { gjenstander: [] });
komme tilbake<CartContext. Forsørger>{barn}CartContext. Forsørger>;
};
Sendefunksjonen er ansvarlig for å oppdatere handlekurvstatusen, så modifiser CartProvider-funksjonen til å inkludere funksjoner som sender produkter til useReducer-kroken når handlekurven oppdateres.
import { createContext, useReducer } fra"reagere";eksportkonst CartProvider = ({ barn }) => {
konst [state, dispatch] = useReducer (cartReducer, initialState);konst addToCart = (produkt) => {
konst updatedCart = [...stat.varer, produkt];sending({
type: "LEGG TIL",
nyttelast: {
varer: oppdatert handlekurv,
},
});
};konst removeFromCart = (id) => {
konst updatedCart = state.items.filter(
(currentProduct) => currentProduct.id !== id
);sending({
type: "FJERNE",
nyttelast: {
varer: oppdatert handlekurv,
},
});
};
komme tilbake<CartContext. Forsørger>{barn}CartContext. Forsørger>;
};
AddToCart-funksjonen legger det nye produktet til de eksisterende produktene og returnerer de oppdaterte produktene i nyttelastobjektet til forsendelsesfunksjonen. På samme måte filtrerer removeFromCart-funksjonen ut varen etter ID og returnerer den oppdaterte listen.
Du må også returnere verdirekvisitten i CartContext-leverandøren.
eksportkonst CartProvider = ({ barn }) => {
konst [state, utsendelse] = brukReducer (cartReducer, {
elementer: [],
});konst addToCart = (produkt) => {};
konst removeFromCart = (id) => {};konst verdi = {
varer: state.items,
Legg i handlekurv,
fjern fra handlevogn,
};
komme tilbake<CartContext. Forsørgerverdi={verdi}>{barn}CartContext. Forsørger>;
}
Verdirekvisitten forbrukes via useContext-kroken.
Forbruker handlevognkonteksten
Så langt har du opprettet handlekurvkonteksten og laget en useReducer-funksjon som oppdaterer handlekurven. Deretter bruker du handlekurvkonteksten i produktkomponenten ved å bruke useContext-kroken.
Start med å pakke inn index.js, den øverste komponenten, med kontekstleverandøren for å gjøre kontekstverdiene tilgjengelige i hele applikasjonen.
import { CartProvider } fra"../context/cartContext";funksjonMin App({ Component, pageProps }) {
komme tilbake (
</CartProvider>
);
}
eksportmisligholde MinApp;
Importer deretter useContext-kroken og handlekurv-kontekstleverandøren i Product.js
import { useContext } fra"reagere"
import { CartContext } fra"../context/cartContext"eksportmisligholdefunksjonProdukt() {
konst {items, addToCart, removeFromCart} = useContext (CartContext)
komme tilbake (
<>{navn}</p>
{pris}</p>
Knappefunksjonen avhenger av om varen allerede ligger i handlekurven. Hvis en vare finnes i handlekurven, skal knappen fjerne den fra handlekurven, og hvis en vare ikke allerede er i handlekurven, skal den legge den til. Dette betyr at du må holde styr på tilstanden til varen ved å bruke useEffect og useState. UseEffect-koden sjekker om varen er i handlekurven etter at komponenten er gjengitt mens useState oppdaterer tilstanden til varen.
konst [exists, setExists] = useState(falsk);useEffect(() => {
konst inCart = items.find((punkt) => item.id id);
hvis (inCart) {
setExists(ekte);
} ellers {
setExists(falsk);
}
}, [varer, id]);
Nå, bruke betinget gjengivelse for å vise knappen basert på den eksisterende tilstanden.
komme tilbake (
{navn}</p>
{pris}</p>
{
finnes
? <knappved trykk={() => removeFromCart (id)}>Fjern fra handlekurvenknapp>
: <knappved trykk={() => addToCart({id, name, price})}>Legg til handlekurvknapp>
}
</div>
)
Merk at onClick-behandlingsfunksjonene er removeFromCart- og addToCart-funksjonene definert i kontekstleverandøren.
Legger til mer funksjonalitet i handlekurven
Du har lært hvordan du lager en handlekurv ved å bruke kontekst-API og useReducer-kroken.
Selv om denne veiledningen bare dekket legg til og fjern funksjonalitet, kan du bruke de samme konseptene for å legge til flere funksjoner som å justere mengden av handlekurvvarer. Det avgjørende er å forstå kontekst-API-en og hvordan du bruker kroker for å oppdatere handlekurvdetaljene.
