Bralci, kot ste vi, pomagajo podpirati MUO. Ko opravite nakup prek povezav na našem spletnem mestu, lahko zaslužimo partnersko provizijo. Preberi več.

Nakupovalni voziček je bistveni del vsakega spletnega mesta za e-trgovino. Kupcem omogoča shranjevanje in nakup izdelkov.

V aplikaciji za e-trgovino Next.js lahko uporabite Context API in kavelj useReducer, da ustvarite voziček. Kontekstni API poenostavi skupno rabo podatkov vozička med komponentami, medtem ko useReducer obravnava stanje vozička.

Ustvarjanje strani izdelka

V mapi strani ustvarite novo datoteko z imenom Product.jsx, ki upodablja en izdelek.

izvozprivzetofunkcijoIzdelek({id, ime, cena}) {
vrnitev (


{name}</p>


{price}</p>

Komponenta izdelka sprejme ID, ime in ceno izdelka ter jih prikaže. Ima tudi gumb »Dodaj v košarico«.

Ko je izdelek že dodan v košarico, mora gumb preklopiti na gumb »odstrani iz košarice« in če izdelka ni v košarici, mora biti na strani prikazan gumb »Dodaj v košarico«.

Za izvajanje te funkcije boste morali spremljati elemente v košarici

instagram viewer
z uporabo kontekstnega API-ja in kavelj useReducer.

Ustvarjanje nakupovalnega vozička z uporabo kontekstnega API-ja

Kontekstni API vam omogoča skupno rabo podatkov med različnimi komponentami, ne da bi vam bilo treba ročno posredovati rekvizite od starša k otroku. Te komponente so lahko navigacijska vrstica, stran s podrobnostmi o izdelku ali stran za dokončanje nakupa.

Ustvarite novo datoteko z imenom cartContext.js v mapi z imenom context in ustvarite kontekst.

uvoz { createContext } od"reagirati";
izvozkonst CartContext = createContext({
 postavke: [],
});

CartContext za privzeto vrednost sprejme niz elementov.

Nato ustvarite ponudnika konteksta. Ponudnik konteksta omogoča komponentam, ki uporabljajo kontekst, da se naročijo na spremembe konteksta.

V novo funkcijo, imenovano cartProvider, dodajte naslednje:

izvozkonst CartProvider = ({ otroci }) => {
vrnitev<CartContext. Ponudnik>{otroci}CartContext. Ponudnik>;
};

Če želite slediti artiklom v košarici, boste uporabili kavelj useReducer.

Kavelj useReducer deluje kot kavelj useState, le da pomaga upravljati bolj zapleteno logiko stanja. Sprejema reduktorsko funkcijo in začetno stanje. Vrne trenutno stanje in dispečersko funkcijo, ki posreduje dejanje reduktorski funkciji.

Ustvarite novo funkcijo z imenom CartReducer in dodajte reduktor.

konst cartReducer = (stanje, dejanje) => {
konst { vrsta, obremenitev } = dejanje;
stikalo (tip) {
Ovitek"DODAJ":
vrnitev {
 ...država,
 elementi: koristna obremenitev.itemi,
 };


Ovitek"ODSTRANI":
vrnitev {
 ...država,
 elementi: koristna obremenitev.itemi,
 };
privzeto:
metatinovoNapaka("Ni primera za to vrsto");
 }
};

Funkcija reduktorja vsebuje stavek switch, ki posodobi stanje glede na vrsto dejanja. Funkcija zmanjševanja vozička ima dejanja »DODAJ« in »ODSTRANI«, ki dodajata v voziček oziroma odstranjujeta iz vozička.

Ko ustvarite funkcijo reduktorja, jo uporabite v kavlju useReducer. Začnite z ustvarjanjem funkcije CartProvider. To je funkcija, ki bo zagotovila kontekst drugim komponentam.

izvozkonst CartProvider = ({otroci}) => {
vrnitev<CartContext. Ponudnik>{otroci}CartContext. Ponudnik>;
}

Nato ustvarite kavelj useReducer.

izvozkonst CartProvider = ({ otroci }) => {
konst [state, dispatch] = useReducer (cartReducer, { predmete: [] });
vrnitev<CartContext. Ponudnik>{otroci}CartContext. Ponudnik>;
};

Funkcija odpreme je odgovorna za posodabljanje stanja vozička, zato spremenite funkcijo CartProvider, da bo vključevala funkcije, ki pošiljajo izdelke na kavelj useReducer, ko se voziček posodobi.

uvoz { createContext, useReducer } od"reagirati";
izvozkonst CartProvider = ({ otroci }) => {
konst [stanje, odprema] = useReducer (cartReducer, initialState);


konst dodaj v košarico = (izdelek) => {
konst updatedCart = [...state.items, product];


 odprema({
 vrsta: "DODAJ",
 tovor: {
 predmeti: posodobljena košarica,
 },
 });
 };


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


 odprema({
 vrsta: "ODSTRANI",
 tovor: {
 predmeti: posodobljena košarica,
 },
 });
 };
vrnitev<CartContext. Ponudnik>{otroci}CartContext. Ponudnik>;
};

Funkcija addToCart doda nov izdelek k obstoječim izdelkom in vrne posodobljene izdelke v objektu tovora funkcije odpreme. Podobno funkcija removeFromCart izloči artikel po ID-ju in vrne posodobljen seznam.

V ponudniku CartContext morate vrniti tudi podlago za vrednost.

izvozkonst CartProvider = ({ otroci }) => {
konst [state, dispatch] = useReducer (cartReducer, {
 postavke: [],
 });
konst dodaj v košarico = (izdelek) => {};
konst removeFromCart = (id) => {};


konst vrednost = {
 predmeti: stanje.predmeti,
 Dodaj v voziček,
 removeFromCart,
 };
vrnitev<CartContext. Ponudnikvrednost={value}>{otroci}CartContext. Ponudnik>;
}

Podpora vrednosti se porabi prek kljuke useContext.

Poraba konteksta košarice

Doslej ste ustvarili kontekst vozička in ustvarili funkcijo useReducer, ki posodablja voziček. Nato boste uporabili kontekst vozička v komponenti izdelka s kavljem useContext.

Začnite tako, da ovijete index.js, zgornjo komponento, s ponudnikom konteksta, da bodo vrednosti konteksta na voljo v celotni aplikaciji.

uvoz { CartProvider } od"../context/cartContext";
funkcijoMyApp({ Komponenta, pageProps }) {
vrnitev (


 </CartProvider>
 );
}
izvozprivzeto MyApp;

Nato uvozite kljuko useContext in ponudnika konteksta vozička v Product.js

uvoz {useContext} od"reagirati"
uvoz { CartContext } od"../context/cartContext"
izvozprivzetofunkcijoIzdelek() {
konst {items, addToCart, removeFromCart} = useContext (CartContext)
vrnitev (
 <>


{name}</p>


{price}</p>

Funkcija gumba je odvisna od tega, ali je izdelek že v košarici. Če artikel obstaja v košarici, ga mora gumb odstraniti iz košarice in če artikla še ni v košarici, ga mora dodati. To pomeni, da morate spremljati stanje elementa z uporabo useEffect in useState. Koda useEffect preveri, ali je artikel v košarici, potem ko komponenta upodablja, medtem ko useState posodobi stanje artikla.

konst [obstaja, setExists] = useState(lažno);
useEffect(() => {
konst inCart = items.find((postavka) => item.id id);
če (v košarici) {
 setExists(prav);
 } drugače {
 setExists(lažno);
 } 
}, [predmeti, id]);

zdaj, uporabite pogojno upodabljanje za prikaz gumba glede na obstoječe stanje.

vrnitev (


{name}</p>


{price}</p>
 {
 obstaja
? <gumbonClick={() => removeFromCart (id)}>Odstrani iz košaricegumb>
: <gumbonClick={() => addToCart({id, name, price})}>Dodaj v košaricogumb>
 }
 </div>
)

Upoštevajte, da sta funkciji za obravnavo onClick funkciji removeFromCart in addToCart, definirani v ponudniku konteksta.

Dodajanje več funkcionalnosti v košarico

Naučili ste se, kako ustvariti nakupovalni voziček z uporabo kontekstnega API-ja in kljuke useReducer.

Čeprav je ta priročnik pokrival samo funkcijo dodajanja in odstranjevanja, lahko iste koncepte uporabite za dodajanje več funkcij, kot je prilagajanje količine artiklov v vozičku. Bistveno je razumevanje kontekstnega API-ja in kako uporabiti kljuke za posodobitev podrobnosti vozička.