Jak vytvořit nákupní košík v Next.js pomocí Context and useReducer

Nákupní košík je nezbytnou součástí každého e-shopu. Umožňuje zákazníkům skladovat a nakupovat produkty.

V aplikaci pro elektronický obchod Next.js můžete k vytvoření košíku použít kontextové rozhraní API a háček useReducer. Kontextové API zjednodušuje sdílení dat košíku mezi komponentami, zatímco useReducer zpracovává stav košíku.

Vytvoření stránky produktu

Ve složce stránek vytvořte nový soubor s názvem Product.jsx, který vykreslí jeden produkt.

vývoznívýchozífunkceProdukt({id, name, price}) {
vrátit se (


{name}</p>

{price}</p>
Přidat do košíku</button>
 </div>
 )
}

Komponenta produktu přijímá ID, název a cenu produktu a zobrazuje je. Má také tlačítko „Přidat do košíku“.

Když je produkt již přidán do košíku, tlačítko by se mělo přepnout na tlačítko „odebrat z košíku“ a pokud produkt v košíku není, na stránce by se mělo zobrazit tlačítko „Přidat do košíku“.

Chcete-li implementovat tuto funkci, budete muset sledovat položky v košíku pomocí kontextového API a háček useReducer.

Vytvoření nákupního košíku pomocí kontextového API

Kontextové rozhraní API vám umožňuje sdílet data mezi různými komponentami, aniž byste museli ručně předávat rekvizity z rodiče na potomka. Těmito součástmi může být navigační panel, stránka s podrobnostmi o produktu nebo stránka pokladny.

Vytvořte nový soubor s názvem cartContext.js ve složce s názvem context a vytvořte kontext.

import { createContext } z"reagovat";
vývozníkonst CartContext = createContext({
 položky: [],
});

CartContext má jako výchozí hodnotu pole položek.

Dále vytvořte poskytovatele kontextu. Poskytovatel kontextu umožňuje komponentám, které využívají kontext, přihlásit se k odběru změn kontextu.

V nové funkci nazvané cartProvider přidejte následující:

vývozníkonst Poskytovatel košíku = ({děti}) => {
vrátit se<Kontext košíku. Poskytovatel>{děti}Kontext košíku. Poskytovatel>;
};

Chcete-li mít přehled o položkách v košíku, použijete háček useReducer.

Hák useReducer funguje jako háček useState, ale pomáhá spravovat složitější logiku stavu. Přijímá redukční funkci a výchozí stav. Vrací aktuální stav a funkci odeslání, která předá akci redukční funkci.

Vytvořte novou funkci s názvem CartReducer a přidejte redukci.

konst cartReducer = (stav, akce) => {
konst { typ, užitečné zatížení } = akce;
přepínač (typ) {
pouzdro"PŘIDAT":
vrátit se {
 ...Stát,
 položky: payload.items,
 };
pouzdro"ODSTRANIT":
vrátit se {
 ...Stát,
 položky: payload.items,
 };
výchozí:
házetNovýChyba("Žádný případ pro tento typ");
 }
};

Funkce redukce obsahuje příkaz switch, který aktualizuje stav v závislosti na typu akce. Funkce redukce košíku má akce „ADD“ a „REMOVE“, které přidávají do košíku a odebírají z košíku.

Po vytvoření funkce redukce ji použijte v háčku useReducer. Začněte vytvořením funkce CartProvider. Toto je funkce, která poskytne kontext ostatním komponentám.

vývozníkonst Poskytovatel košíku = ({děti}) => {
vrátit se<Kontext košíku. Poskytovatel>{děti}Kontext košíku. Poskytovatel>;
}

Poté vytvořte háček useReducer.

vývozníkonst Poskytovatel košíku = ({děti}) => {
konst [stav, odeslání] = useReducer (cartReducer, { položky: [] });
vrátit se<Kontext košíku. Poskytovatel>{děti}Kontext košíku. Poskytovatel>;
};

Funkce odeslání je zodpovědná za aktualizaci stavu košíku, takže upravte funkci CartProvider tak, aby zahrnovala funkce, které při aktualizaci košíku odesílají produkty na háček useReducer.

import { createContext, useReducer } z"reagovat";
vývozníkonst Poskytovatel košíku = ({děti}) => {
konst [stav, odeslání] = useReducer (cartReducer, initialState);
konst addToCart = (produkt) => {
konst updatedCart = [...stav.položky, produkt];
 odeslání({
 typ: "PŘIDAT",
 užitečné zatížení: {
 položky: aktualizovaný košík,
 },
 });
 };
konst removeFromCart = (id) => {
konst updatedCart = state.items.filter(
 (currentProduct) => currentProduct.id !== id
 );
 odeslání({
 typ: "ODSTRANIT",
 užitečné zatížení: {
 položky: aktualizovaný košík,
 },
 });
 };
vrátit se<Kontext košíku. Poskytovatel>{děti}Kontext košíku. Poskytovatel>;
};

Funkce addToCart připojí nový produkt ke stávajícím produktům a vrátí aktualizované produkty v objektu užitečného zatížení funkce odeslání. Podobně funkce removeFromCart odfiltruje položku podle ID a vrátí aktualizovaný seznam.

Musíte také vrátit hodnotu prop v poskytovateli CartContext.

vývozníkonst Poskytovatel košíku = ({děti}) => {
konst [stav, odeslání] = useReducer (cartReducer, {
 položky: [],
 });
konst addToCart = (produkt) => {};
konst removeFromCart = (id) => {};
konst hodnota = {
 položky: state.items,
 přidat do košíku,
 odebrat z košíku,
 };
vrátit se<Kontext košíku. Poskytovatelhodnota={hodnota}>{děti}Kontext košíku. Poskytovatel>;
}

Hodnota prop je spotřebována prostřednictvím háku useContext.

Konzumace kontextu košíku

Doposud jste vytvořili kontext košíku a vytvořili funkci useReducer, která aktualizuje košík. Dále použijete kontext košíku v komponentě produktu pomocí háčku useContext.

Začněte tím, že zabalíte index.js, nejvyšší komponentu, do poskytovatele kontextu, aby byly kontextové hodnoty dostupné v celé aplikaci.

import { CartProvider } z"../context/cartContext";
funkceMoje aplikace({ Component, pageProps }) {
vrátit se (


 </CartProvider>
 );
}
vývoznívýchozí MyApp;

Poté importujte háček useContext a poskytovatele kontextu košíku do Product.js

import { useContext } z"reagovat"
import { CartContext } z"../context/cartContext"
vývoznívýchozífunkceProdukt() {
konst {items, addToCart, removeFromCart} = useContext (CartContext)
vrátit se (
 <>


{name}</p>

{price}</p>
Přidat do košíku</button>
 </div>
 </>
 )
}

Funkce tlačítka závisí na tom, zda je zboží již v košíku. Pokud položka v košíku existuje, tlačítko by ji mělo z košíku odebrat a pokud položka v košíku ještě není, mělo by ji přidat. To znamená, že musíte sledovat stav položky pomocí useEffect a useState. Kód useEffect zkontroluje, zda je položka v košíku po vykreslení komponenty, zatímco useState aktualizuje stav položky.

konst [existuje, setExists] = useState(Nepravdivé);
useEffect(() => {
konst inCart = items.find((položka) => item.id id);
-li (inCart) {
 setExists(skutečný);
 } jiný {
 setExists(Nepravdivé);
 } 
}, [položky, id]);

Nyní, použít podmíněné vykreslování pro zobrazení tlačítka na základě existujícího stavu.

vrátit se (


{name}</p>

{price}</p>
 {
 existuje
? <knoflíkpři kliknutí={() => removeFromCart (id)}>Odebrat z košíkuknoflík>
: <knoflíkpři kliknutí={() => addToCart({id, name, price})}>Přidat do košíkuknoflík>
 }
 </div>
)

Všimněte si, že funkcemi obsluhy onClick jsou funkce removeFromCart a addToCart definované v poskytovateli kontextu.

Přidání dalších funkcí do košíku

Naučili jste se, jak vytvořit nákupní košík pomocí kontextového rozhraní API a háčku useReducer.

I když tato příručka pokrývá pouze funkce přidávání a odebírání, můžete použít stejné koncepty k přidání dalších funkcí, jako je úprava množství položek košíku. Rozhodující je pochopení kontextového API a toho, jak používat háčky k aktualizaci podrobností košíku.