Ako vytvoriť nákupný košík v Next.js s kontextom a useReducer

Nákupný košík je nevyhnutnou súčasťou každého e-shopu. Umožňuje zákazníkom skladovať a nakupovať produkty.

V aplikácii elektronického obchodu Next.js môžete na vytvorenie košíka použiť kontextové rozhranie API a háčik useReducer. Kontextové API zjednodušuje zdieľanie údajov košíka medzi komponentmi, zatiaľ čo useReducer spracováva stav košíka.

Vytvorenie stránky produktu

V priečinku stránok vytvorte nový súbor s názvom Product.jsx, ktorý vykreslí jeden produkt.

exportpredvolenáfunkciuProdukt({id, name, price}) {
vrátiť (


{name}</p>

{price}</p>
Pridať do košíka</button>
 </div>
 )
}

Komponent produktu akceptuje ID, názov a cenu produktu a zobrazí ich. Má tiež tlačidlo „Pridať do košíka“.

Keď je produkt už vložený do košíka, tlačidlo by sa malo prepnúť na tlačidlo „odstrániť z košíka“ a ak produkt v košíku nie je, na stránke by sa malo zobraziť tlačidlo „Pridať do košíka“.

Na implementáciu tejto funkcie budete musieť sledovať položky v košíku pomocou kontextového API a háčik useReducer.

Vytvorenie nákupného košíka pomocou kontextového API

Kontextové rozhranie API vám umožňuje zdieľať údaje medzi rôznymi komponentmi bez toho, aby ste museli manuálne odovzdávať rekvizity z rodiča na dieťa. Týmito komponentmi môže byť navigačná lišta, stránka s podrobnosťami o produkte alebo stránka pokladne.

Vytvorte nový súbor s názvom cartContext.js v priečinku s názvom context a vytvorte kontext.

importovať { createContext } od"reagovať";
exportkonšt CartContext = createContext({
 položky: [],
});

CartContext berie pole položiek ako predvolenú hodnotu.

Ďalej vytvorte poskytovateľa kontextu. Poskytovateľ kontextu umožňuje komponentom, ktoré využívajú kontext, prihlásiť sa na zmeny kontextu.

V novej funkcii s názvom cartProvider pridajte nasledovné:

exportkonšt Poskytovateľ košíka = ({ deti }) => {
vrátiť<Kontext košíka. Poskytovateľ>{children}Kontext košíka. Poskytovateľ>;
};

Ak chcete mať prehľad o položkách v košíku, použijete háčik useReducer.

Hák useReducer funguje ako háčik useState, ale pomáha spravovať zložitejšiu logiku stavu. Akceptuje funkciu redukcie a počiatočný stav. Vráti aktuálny stav a funkciu odoslania, ktorá odovzdá akciu redukčnej funkcii.

Vytvorte novú funkciu s názvom CartReducer a pridajte redukciu.

konšt cartReducer = (stav, akcia) => {
konšt { typ, užitočné zaťaženie } = akcia;
prepínač (typ) {
prípad"PRIDAŤ":
vrátiť {
 ...štát,
 položky: payload.items,
 };
prípad"ODSTRÁNIŤ":
vrátiť {
 ...štát,
 položky: payload.items,
 };
predvolená:
hodiťNovýChyba("Žiadny prípad pre tento typ");
 }
};

Funkcia redukcie obsahuje príkaz switch, ktorý aktualizuje stav v závislosti od typu akcie. Funkcia redukcie košíka má akcie „PRIDAŤ“ a „ODSTRÁNIŤ“, ktoré pridávajú do košíka a odoberajú z košíka.

Po vytvorení funkcie redukcie ju použite v háku useReducer. Začnite vytvorením funkcie CartProvider. Toto je funkcia, ktorá poskytne kontext ostatným komponentom.

exportkonšt Poskytovateľ košíka = ({children}) => {
vrátiť<Kontext košíka. Poskytovateľ>{children}Kontext košíka. Poskytovateľ>;
}

Potom vytvorte háčik useReducer.

exportkonšt Poskytovateľ košíka = ({ deti }) => {
konšt [stav, odoslanie] = useReducer (cartReducer, { položky: [] });
vrátiť<Kontext košíka. Poskytovateľ>{children}Kontext košíka. Poskytovateľ>;
};

Funkcia odoslania je zodpovedná za aktualizáciu stavu košíka, preto upravte funkciu CartProvider tak, aby zahŕňala funkcie, ktoré odosielajú produkty do háku useReducer, keď sa košík aktualizuje.

importovať { createContext, useReducer } od"reagovať";
exportkonšt Poskytovateľ košíka = ({ deti }) => {
konšt [stav, odoslanie] = useReducer (cartReducer, initialState);
konšt pridať do košíka = (produktu) => {
konšt updatedCart = [...state.items, product];
 odoslanie ({
 typ: "PRIDAŤ",
 užitočné zaťaženie: {
 položky: aktualizovaný košík,
 },
 });
 };
konšt removeFromCart = (id) => {
konšt updatedCart = state.items.filter(
 (currentProduct) => currentProduct.id !== id
 );
 odoslanie ({
 typ: "ODSTRÁNIŤ",
 užitočné zaťaženie: {
 položky: aktualizovaný košík,
 },
 });
 };
vrátiť<Kontext košíka. Poskytovateľ>{children}Kontext košíka. Poskytovateľ>;
};

Funkcia addToCart pripojí nový produkt k existujúcim produktom a vráti aktualizované produkty v objekte užitočného zaťaženia funkcie odoslania. Podobne funkcia removeFromCart odfiltruje položku podľa ID a vráti aktualizovaný zoznam.

Musíte tiež vrátiť hodnotu prop v poskytovateľovi CartContext.

exportkonšt Poskytovateľ košíka = ({ deti }) => {
konšt [stav, odoslanie] = useReducer (cartReducer, {
 položky: [],
 });
konšt pridať do košíka = (produktu) => {};
konšt removeFromCart = (id) => {};
konšt hodnota = {
 položky: state.items,
 pridať do košíka,
 odstrániť z košíka,
 };
vrátiť<Kontext košíka. Poskytovateľhodnotu={value}>{children}Kontext košíka. Poskytovateľ>;
}

Hodnota prop sa spotrebuje cez háčik useContext.

Konzumácia kontextu košíka

Doteraz ste vytvorili kontext košíka a vytvorili funkciu useReducer, ktorá aktualizuje košík. Ďalej použijete kontext košíka v komponente produktu pomocou háku useContext.

Začnite zabalením index.js, najvyššieho komponentu, s poskytovateľom kontextu, aby boli kontextové hodnoty dostupné v celej aplikácii.

importovať { CartProvider } od"../context/cartContext";
funkciuMyApp({ Component, pageProps }) {
vrátiť (


 </CartProvider>
 );
}
exportpredvolená MyApp;

Potom importujte háčik useContext a poskytovateľa kontextu košíka do Product.js

importovať { useContext } od"reagovať"
importovať { CartContext } od"../context/cartContext"
exportpredvolenáfunkciuProdukt() {
konšt {items, addToCart, removeFromCart} = useContext (CartContext)
vrátiť (
 <>


{name}</p>

{price}</p>
Pridať do košíka</button>
 </div>
 </>
 )
}

Funkcia tlačidla závisí od toho, či je tovar už v košíku. Ak položka v košíku existuje, tlačidlo by ju malo z košíka odstrániť a ak položka ešte v košíku nie je, malo by ju pridať. To znamená, že musíte sledovať stav položky pomocou useEffect a useState. Kód useEffect skontroluje, či je položka v košíku po vykreslení komponentu, zatiaľ čo useState aktualizuje stav položky.

konšt [existuje, setExists] = useState(falošný);
useEffect(() => {
konšt inCart = items.find((položka) => item.id id);
ak (inCart) {
 setExists(pravda);
 } inak {
 setExists(falošný);
 } 
}, [položky, id]);

teraz použiť podmienené vykresľovanie na zobrazenie tlačidla na základe existujúceho stavu.

vrátiť (


{name}</p>

{price}</p>
 {
 existuje
? <tlačidlopo kliknutí={() => removeFromCart (id)}>Remove from Carttlačidlo>
: <tlačidlopo kliknutí={() => addToCart({id, name, price})}>Pridať do košíkatlačidlo>
 }
 </div>
)

Všimnite si, že funkcie obsluhy onClick sú funkcie removeFromCart a addToCart definované v poskytovateľovi kontextu.

Pridanie ďalších funkcií do košíka

Naučili ste sa, ako vytvoriť nákupný košík pomocou kontextového rozhrania API a háku useReducer.

Aj keď táto príručka pokrývala iba funkcie pridávania a odstraňovania, rovnaké koncepty môžete použiť na pridanie ďalších funkcií, ako je napríklad úprava množstva položiek v košíku. Rozhodujúcou vecou je pochopenie kontextového API a ako používať háčiky na aktualizáciu podrobností košíka.