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>
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>
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.
