Ostukorvi loomine rakenduses Next.js konteksti ja useReduceri abil

Ostukorv on iga e-kaubandussaidi oluline osa. See võimaldab klientidel tooteid säilitada ja osta.

Next.js e-kaubanduse rakenduses saate ostukorvi loomiseks kasutada konteksti API-t ja konksu useReducer. Konteksti-API lihtsustab ostukorvi andmete jagamist komponentide vahel, samas kui useReducer tegeleb ostukorvi olekuga.

Tootelehe loomine

Looge kaustas Lehed uus fail nimega Product.jsx, mis renderdab ühe toote.

eksportidavaikimisifunktsiooniToode({id, nimi, hind}) {
tagasi (


{nimi}</p>

{hind}</p>
Lisa ostukorvi</button>
 </div>
 )
}

Tootekomponent aktsepteerib toote ID, nime ja hinda ning kuvab selle. Sellel on ka nupp "Lisa ostukorvi".

Kui toode on juba ostukorvi lisatud, peaks nupp lülituma nupule “Eemalda ostukorvist” ja kui toodet ostukorvis pole, peaks lehel olema nupp “Lisa ostukorvi”.

Selle funktsiooni rakendamiseks peate jälgima ostukorvis olevaid tooteid konteksti API abil ja useReducer konks.

Ostukorvi loomine konteksti API abil

Konteksti API võimaldab teil jagada andmeid erinevate komponentide vahel, ilma et peaksite rekvisiite vanemalt lapsele käsitsi edastama. Need komponendid võivad olla navigeerimisriba, toote üksikasjade leht või kassaleht.

Looge kontekstinimelises kaustas uus fail nimega cartContext.js ja looge kontekst.

importida { CreateContext } alates"reageerida";
eksportidakonst CartContext = createContext({
 üksused: [],
});

CartContext võtab vaikeväärtusena üksuste massiivi.

Järgmisena looge kontekstipakkuja. Kontekstipakkuja võimaldab konteksti tarbivatel komponentidel tellida kontekstimuudatusi.

Uues funktsioonis nimega cartProvider lisage järgmine:

eksportidakonst Ostukorvipakkuja = ({lapsed }) => {
tagasi<Ostukorvi kontekst. Pakkuja>{lapsed}Ostukorvi kontekst. Pakkuja>;
};

Ostukorvis olevate kaupade jälgimiseks kasutage reduktori konksu.

Konks useReducer töötab nagu useState konks, välja arvatud see, et see aitab hallata keerukamat olekuloogikat. See aktsepteerib reduktorfunktsiooni ja algolekut. See tagastab praeguse oleku ja väljasaatmisfunktsiooni, mis edastab toimingu reduktorfunktsioonile.

Looge uus funktsioon nimega CartReducer ja lisage reduktor.

konst käru Reduktor = (olek, tegevus) => {
konst {tüüp, kasulik koormus} = tegevus;
lüliti (tüüp) {
juhtum"LISAMA":
tagasi {
 ...riik,
 üksused: payload.items,
 };
juhtum"EEMALDADA":
tagasi {
 ...riik,
 üksused: payload.items,
 };
vaikimisi:
viskamauusViga("Selle tüübi jaoks pole juhtumit");
 }
};

Reduktorfunktsioon sisaldab lüliti avaldust, mis värskendab olekut olenevalt toimingu tüübist. Käru reduktorfunktsioonil on toimingud “LISA” ja “EEMALDAMINE”, mis lisatakse vastavalt ostukorvi ja eemaldatakse ostukorvist.

Pärast reduktorfunktsiooni loomist kasutage seda reduktori konksus. Alustage CartProvider funktsiooni loomisega. See on funktsioon, mis pakub konteksti teistele komponentidele.

eksportidakonst Ostukorvipakkuja = ({lapsed}) => {
tagasi<Ostukorvi kontekst. Pakkuja>{lapsed}Ostukorvi kontekst. Pakkuja>;
}

Seejärel looge konks useReducer.

eksportidakonst Ostukorvipakkuja = ({lapsed }) => {
konst [state, dispatch] = useReducer (cartReducer, { esemed: [] });
tagasi<Ostukorvi kontekst. Pakkuja>{lapsed}Ostukorvi kontekst. Pakkuja>;
};

Saatmisfunktsioon vastutab ostukorvi oleku värskendamise eest, seega muutke funktsiooni CartProvider, et see hõlmaks funktsioone, mis saadavad tooted ostukorvi värskendamisel konksule useReducer.

importida { createContext, useReducer } alates"reageerida";
eksportidakonst Ostukorvipakkuja = ({lapsed }) => {
konst [olek, lähetamine] = useReducer (cartReducer, originState);
konst addToCart = (toode) => {
konst updatedCart = [...state.items, product];
 saatmine({
 tüüp: "LISAMA",
 kasulik koormus: {
 üksused: uuendatud ostukorv,
 },
 });
 };
konst eemalda ostukorvist = (id) => {
konst updatedCart = state.items.filter(
 (praegune toode) => praegunetoode.id !== id
 );
 saatmine({
 tüüp: "EEMALDADA",
 kasulik koormus: {
 üksused: uuendatud ostukorv,
 },
 });
 };
tagasi<Ostukorvi kontekst. Pakkuja>{lapsed}Ostukorvi kontekst. Pakkuja>;
};

Funktsioon addToCart lisab uue toote olemasolevatele toodetele ja tagastab värskendatud tooted lähetusfunktsiooni kasuliku koormuse objektis. Samamoodi filtreerib funktsioon RemoveFromCart kauba ID alusel välja ja tagastab värskendatud loendi.

Samuti peate CartContexti pakkujas tagastama väärtuse propi.

eksportidakonst Ostukorvipakkuja = ({lapsed }) => {
konst [state, dispatch] = useReducer (cartReducer, {
 üksused: [],
 });
konst addToCart = (toode) => {};
konst eemalda ostukorvist = (id) => {};
konst väärtus = {
 üksused: state.items,
 Lisa ostukorvi,
 eemalda ostukorvist,
 };
tagasi<Ostukorvi kontekst. Pakkujaväärtus={value}>{lapsed}Ostukorvi kontekst. Pakkuja>;
}

Väärtuse propi tarbitakse useContexti konksu kaudu.

Ostukorvi tarbimine

Siiani olete loonud ostukorvi konteksti ja loonud funktsiooni useReducer, mis värskendab ostukorvi. Järgmisena tarbite ostukorvi konteksti tootekomponendis, kasutades konksu useContext.

Alustuseks mähkige ülemine komponent index.js kontekstipakkujaga, et muuta kontekstiväärtused kättesaadavaks kogu rakenduses.

importida { CartProvider } alates"../context/cartContext";
funktsiooniMinuApp({ Component, pageProps }) {
tagasi (


 </CartProvider>
 );
}
eksportidavaikimisi MyApp;

Seejärel importige tootesse Product.js konks useContext ja ostukorvi kontekstipakkuja

importida { useContext } alates"reageerida"
importida { Ostukorvi kontekst } alates"../context/cartContext"
eksportidavaikimisifunktsiooniToode() {
konst {items, addToCart, removeFromCart} = useContext (CartContext)
tagasi (
 <>


{nimi}</p>

{hind}</p>
Lisa ostukorvi</button>
 </div>
 </>
 )
}

Nupu funktsioon sõltub sellest, kas kaup on juba ostukorvis. Kui kaup on ostukorvis, siis nupp peaks selle ostukorvist eemaldama ja kui kaupa veel ostukorvis ei ole, siis lisama selle. See tähendab, et peate jälgima üksuse olekut kasutades useEffect ja useState. Kood useEffect kontrollib, kas toode on ostukorvis pärast komponendi renderdamist, samal ajal kui useState üksuse olekut värskendab.

konst [exists, setExists] = useState(vale);
useEffect(() => {
konst inCart = items.find((üksus) => item.id id);
kui (inCart) {
 setExists(tõsi);
 } muidu {
 setExists(vale);
 } 
}, [üksused, id]);

Nüüd kasutada tingimuslikku renderdamist nupu kuvamiseks olemasoleva oleku alusel.

tagasi (


{nimi}</p>

{hind}</p>
 {
 on olemas
? <nuppuonClick={() => removeFromCart (id)}>Eemalda ostukorvistnuppu>
: <nuppuonClick={() => addToCart({id, nimi, hind})}> Lisa ostukorvinuppu>
 }
 </div>
)

Pange tähele, et onClicki käitleja funktsioonid on kontekstipakkujas määratletud funktsioonid removeFromCart ja addToCart.

Lisan ostukorvi rohkem funktsioone

Olete õppinud, kuidas luua ostukorvi konteksti API ja useReduceri konksu abil.

Kuigi see juhend hõlmas ainult lisamise ja eemaldamise funktsioone, saate samu kontseptsioone kasutada ka lisafunktsioonide lisamiseks, näiteks ostukorvi kaupade koguse reguleerimiseks. Oluline on mõista konteksti API-t ja seda, kuidas kasutada ostukorvi üksikasjade värskendamiseks konkse.