Bevásárlókosár létrehozása a Next.js-ben a Context és a useReducer segítségével

A bevásárlókosár minden e-kereskedelmi webhely elengedhetetlen része. Lehetővé teszi az ügyfelek számára a termékek tárolását és vásárlását.

A Next.js e-kereskedelmi alkalmazásban a Context API és a useReducer hook segítségével hozhat létre kosarat. A kontextus API leegyszerűsíti a kosáradatok megosztását az összetevők között, míg a useReducer kezeli a kosár állapotát.

A termékoldal létrehozása

Az oldalak mappában hozzon létre egy új Product.jsx fájlt, amely egyetlen terméket jelenít meg.

exportalapértelmezettfunkcióTermék({azonosító, név, ár}) {
Visszatérés (


{név}</p>

{ár}</p>
Kosárba</button>
 </div>
 )
}

A termékkomponens elfogadja a termék azonosítóját, nevét és árát, és megjeleníti azt. Van rajta egy „Kosárba helyezés” gomb is.

Ha a terméket már a kosárba helyezték, akkor a gombnak át kell váltania a „Kivétel a kosárból” gombra, és ha a termék nincs a kosárban, akkor az oldalon jelenjen meg a „Kosárba” gomb.

Ennek a funkciónak a megvalósításához nyomon kell követnie a kosárban lévő tételeket a kontextus API használatával és a useReducer horog.

Bevásárlókosár létrehozása a Context API használatával

A kontextus API lehetővé teszi az adatok megosztását a különböző összetevők között anélkül, hogy a kellékeket manuálisan át kellene adnia szülőről gyermekre. Ezek az összetevők lehetnek a navigációs sáv, a termék részleteit tartalmazó oldal vagy a fizetési oldal.

Hozzon létre egy cartContext.js nevű új fájlt a Context nevű mappában, és hozza létre a környezetet.

import { CreateContext } tól től"reagál";
exportconst CartContext = createContext({
 tételek: [],
});

A CartContext egy tételtömböt vesz alapértelmezett értékként.

Ezután hozza létre a kontextusszolgáltatót. A kontextusszolgáltató lehetővé teszi a kontextust fogyasztó összetevőknek, hogy előfizessenek a kontextusváltozásokra.

A cartProvider nevű új függvényben adja hozzá a következőket:

exportconst CartProvider = ({gyerekek }) => {
Visszatérés<CartContext. Szolgáltató>{gyermekek}CartContext. Szolgáltató>;
};

A kosárban lévő tételek nyomon követéséhez használja a useReducer horgot.

A useReducer hook úgy működik, mint a useState hook, azzal a különbséggel, hogy segít a bonyolultabb állapotlogika kezelésében. Elfogadja a redukciós funkciót és a kezdeti állapotot. Visszaadja az aktuális állapotot és egy diszpécser függvényt, amely egy műveletet továbbít a reduktor funkciónak.

Hozzon létre egy új CartReducer nevű függvényt, és adja hozzá a szűkítőt.

const cartReducer = (állapot, cselekvés) => {
const {típus, hasznos teher} = művelet;
kapcsoló (típus) {
ügy"ADD":
Visszatérés {
 ...állapot,
 tételek: payload.items,
 };
ügy"REMOVE":
Visszatérés {
 ...állapot,
 tételek: payload.items,
 };
alapértelmezett:
dobásújHiba("Ennek a típusnak nincs esete");
 }
};

A reduktor funkció egy kapcsoló utasítást tartalmaz, amely a művelet típusától függően frissíti az állapotot. A kosárcsökkentő funkció „ADD” és „REMOVE” műveletekkel rendelkezik, amelyek a kosárhoz adják, illetve a kosárból kivehetők.

A reduktor funkció létrehozása után használja a useReducer horogban. Kezdje a CartProvider funkció létrehozásával. Ez az a funkció, amely kontextust biztosít a többi összetevő számára.

exportconst CartProvider = ({gyermekek}) => {
Visszatérés<CartContext. Szolgáltató>{gyermekek}CartContext. Szolgáltató>;
}

Ezután hozza létre a useReducer hookot.

exportconst CartProvider = ({gyerekek }) => {
const [állapot, feladás] = useReducer (cartReducer, { tételeket: [] });
Visszatérés<CartContext. Szolgáltató>{gyermekek}CartContext. Szolgáltató>;
};

A diszpécser funkció felelős a kosár állapotának frissítéséért, ezért módosítsa a CartProvider funkciót, hogy olyan funkciókat is tartalmazzon, amelyek a kosár frissítésekor termékeket küldenek a useReducer hookba.

import { CreateContext, useReducer } tól től"reagál";
exportconst CartProvider = ({gyerekek }) => {
const [állapot, feladás] = useReducer (cartReducer, kezdeti állapot);
const addToCart = (termék) => {
const updatedCart = [...state.items, product];
 Elküldés({
 típus: "ADD",
 hasznos teher: {
 tételek: frissített kosár,
 },
 });
 };
const RemoveFromCart = (id) => {
const updatedCart = state.items.filter(
 (currentProduct) => currentProduct.id !== id
 );
 Elküldés({
 típus: "REMOVE",
 hasznos teher: {
 tételek: frissített kosár,
 },
 });
 };
Visszatérés<CartContext. Szolgáltató>{gyermekek}CartContext. Szolgáltató>;
};

Az addToCart függvény hozzáfűzi az új terméket a meglévő termékekhez, és visszaadja a frissített termékeket a feladási függvény rakomány objektumában. Hasonlóképpen, az removeFromCart függvény azonosító alapján kiszűri a tételt, és visszaadja a frissített listát.

A CartContext szolgáltatóban is vissza kell adnia az értékprofilt.

exportconst CartProvider = ({gyerekek }) => {
const [állapot, feladás] = useReducer (cartReducer, {
 tételek: [],
 });
const addToCart = (termék) => {};
const RemoveFromCart = (id) => {};
const érték = {
 tételek: state.items,
 kosárba,
 távolítsa el a kosárból,
 };
Visszatérés<CartContext. Szolgáltatóérték={érték}>{gyermekek}CartContext. Szolgáltató>;
}

Az értéktámasz a useContext hook segítségével kerül felhasználásra.

A kosár kontextusának fogyasztása

Eddig létrehozta a kosárkörnyezetet, és létrehozott egy useReducer függvényt, amely frissíti a kosarat. Ezután a useContext hook segítségével felhasználhatja a kosár kontextusát a termékkomponensben.

Kezdje azzal, hogy az index.js-t, a legfelső összetevőt csomagolja a kontextusszolgáltatóval, hogy a környezeti értékek elérhetők legyenek az egész alkalmazásban.

import { Kosárszolgáltató } tól től"../context/cartContext";
funkcióMyApp({ Component, pageProps }) {
Visszatérés (


 </CartProvider>
 );
}
exportalapértelmezett MyApp;

Ezután importálja a useContext hook-ot és a kosárkörnyezet-szolgáltatót a Product.js fájlba

import { useContext } tól től"reagál"
import { KosárContext } tól től"../context/cartContext"
exportalapértelmezettfunkcióTermék() {
const {items, addToCart, removeFromCart} = useContext (CartContext)
Visszatérés (
 <>


{név}</p>

{ár}</p>
Kosárba</button>
 </div>
 </>
 )
}

A gomb funkciója attól függ, hogy az áru már a kosárban van-e. Ha egy termék van a kosárban, akkor a gombbal távolítsa el azt a kosárból, és ha egy termék még nincs a kosárban, akkor adja hozzá. Ez azt jelenti, hogy nyomon kell követnie az elem állapotát a useEffect és a useState segítségével. A useEffect kód ellenőrzi, hogy az elem a kosárban van-e az összetevő megjelenítése után, miközben a useState frissíti a tétel állapotát.

const [exists, setExists] = useState(hamis);
useEffect(() => {
const inCart = items.find((tétel) => item.id id);
ha (inCart) {
 setExists(igaz);
 } más {
 setExists(hamis);
 } 
}, [elemek, azonosító]);

Most, feltételes renderelést használjon hogy a gomb a létező állapot alapján jelenjen meg.

Visszatérés (


{név}</p>

{ár}</p>
 {
 létezik
? <gombkattintásra={() => RemoveFromCart (id)}> Eltávolítás a kosárbólgomb>
: <gombkattintásra={() => addToCart({azonosító, név, ár})}> Kosárba helyezésgomb>
 }
 </div>
)

Vegye figyelembe, hogy az onClick kezelő függvényei a kontextusszolgáltatóban meghatározott removeFromCart és addToCart függvények.

További funkciók hozzáadása a kosárhoz

Megtanulta, hogyan hozhat létre bevásárlókosarat a kontextus API és a useReducer hook használatával.

Bár ez az útmutató csak a hozzáadási és eltávolítási funkciókra vonatkozik, ugyanazokat a fogalmakat használhatja további funkciók hozzáadásához, például a kosár tételeinek mennyiségének módosításához. A kulcsfontosságú a kontextus API megértése, és a kosár részleteinek frissítéséhez használt horgok használata.