Kā izveidot iepirkumu grozu vietnē Next.js ar kontekstu un useReducer

Iepirkumu grozs ir jebkuras e-komercijas vietnes būtiska sastāvdaļa. Tas ļauj klientiem uzglabāt un iegādāties produktus.

E-komercijas lietotnē Next.js varat izmantot konteksta API un useReducer āķi, lai izveidotu grozu. Konteksta API vienkāršo groza datu koplietošanu starp komponentiem, kamēr useReducer apstrādā groza stāvokli.

Produkta lapas izveide

Mapē lapas izveidojiet jaunu failu Product.jsx, kas atveido vienu produktu.

eksportētnoklusējumafunkcijuProdukts({id, nosaukums, cena}) {
atgriezties (


{name}</p>

{cena}</p>
Pievienot grozam</button>
 </div>
 )
}

Produkta komponents pieņem produkta ID, nosaukumu un cenu un parāda to. Tam ir arī poga “Pievienot grozam”.

Kad prece jau ir pievienota grozam, pogai jāpārslēdzas uz pogu “Izņemt no groza” un, ja prece nav grozā, lapā ir jāparāda poga “Pievienot grozam”.

Lai ieviestu šo funkcionalitāti, jums būs jāseko līdzi grozā esošajām precēm izmantojot konteksta API un useReducer āķis.

Iepirkumu groza izveide, izmantojot konteksta API

Konteksta API ļauj koplietot datus starp dažādiem komponentiem, manuāli nenododot rekvizītus no vecākiem bērnam. Šie komponenti var būt navigācijas josla, produkta informācijas lapa vai izrakstīšanās lapa.

Izveidojiet jaunu failu ar nosaukumu cartContext.js mapē ar nosaukumu konteksts un izveidojiet kontekstu.

imports { CreateContext } no"reaģēt";
eksportētkonst CartContext = createContext({
 preces: [],
});

CartContext kā noklusējuma vērtību izmanto preču masīvu.

Pēc tam izveidojiet konteksta nodrošinātāju. Kontekstu nodrošinātājs ļauj komponentiem, kas patērē kontekstu, abonēt konteksta izmaiņas.

Jaunā funkcijā ar nosaukumu cartProvider pievienojiet šo:

eksportētkonst CartProvider = ({bērni}) => {
atgriezties<GrozsContext. Pakalpojumu sniedzējs>{bērni}GrozsContext. Pakalpojumu sniedzējs>;
};

Lai sekotu līdzi grozā esošajām precēm, izmantojiet reducer āķi.

UseReducer āķis darbojas tāpat kā useState āķis, izņemot to, ka tas palīdz pārvaldīt sarežģītāku stāvokļa loģiku. Tas pieņem reduktora funkciju un sākotnējo stāvokli. Tas atgriež pašreizējo stāvokli un nosūtīšanas funkciju, kas nodod darbību reduktora funkcijai.

Izveidojiet jaunu funkciju ar nosaukumu CartReducer un pievienojiet reduktoru.

konst grozsReducētājs = (stāvoklis, darbība) => {
konst {tips, kravnesība} = darbība;
slēdzis (tips) {
lietu"PIEVIENOT":
atgriezties {
 ...Valsts,
 preces: payload.items,
 };
lietu"NOŅEMT":
atgriezties {
 ...Valsts,
 preces: payload.items,
 };
noklusējuma:
mestjaunsKļūda("Nav gadījuma šādam tipam");
 }
};

Reduktora funkcija ietver slēdža paziņojumu, kas atjaunina stāvokli atkarībā no darbības veida. Ratiņu reduktora funkcijai ir darbības “PIEVIENOT” un “NOŅEMT”, kas attiecīgi tiek pievienotas grozam un izņemtas no groza.

Pēc reduktora funkcijas izveidošanas izmantojiet to useReducer āķī. Sāciet, izveidojot CartProvider funkciju. Šī ir funkcija, kas nodrošinās kontekstu citiem komponentiem.

eksportētkonst CartProvider = ({bērni}) => {
atgriezties<GrozsContext. Pakalpojumu sniedzējs>{bērni}GrozsContext. Pakalpojumu sniedzējs>;
}

Pēc tam izveidojiet useReducer āķi.

eksportētkonst CartProvider = ({bērni}) => {
konst [state, dispatch] = useReducer (cartReducer, { preces: [] });
atgriezties<GrozsContext. Pakalpojumu sniedzējs>{bērni}GrozsContext. Pakalpojumu sniedzējs>;
};

Nosūtīšanas funkcija ir atbildīga par groza stāvokļa atjaunināšanu, tāpēc modificējiet funkciju CartProvider, lai iekļautu funkcijas, kas nosūta produktus uz useReducer āķi, kad grozs tiek atjaunināts.

imports { CreateContext, useReducer } no"reaģēt";
eksportētkonst CartProvider = ({bērni}) => {
konst [stāvoklis, nosūtīšana] = useReducer (cartReducer, originState);
konst addToCart = (produkts) => {
konst updatedCart = [...state.items, produkts];
 nosūtīšana({
 veids: "PIEVIENOT",
 krava: {
 preces: atjaunināts grozs,
 },
 });
 };
konst noņemt no groza = (id) => {
konst updatedCart = state.items.filter(
 (currentProduct) => currentProduct.id !== id
 );
 nosūtīšana({
 veids: "NOŅEMT",
 krava: {
 preces: atjaunināts grozs,
 },
 });
 };
atgriezties<GrozsContext. Pakalpojumu sniedzējs>{bērni}GrozsContext. Pakalpojumu sniedzējs>;
};

Funkcija addToCart pievieno jauno produktu esošajiem produktiem un atgriež atjauninātos produktus nosūtīšanas funkcijas kravas objektā. Tāpat funkcija removeFromCart filtrē preci pēc ID un atgriež atjaunināto sarakstu.

Jums ir arī jāatgriež vērtības piedāvājums CartContext nodrošinātājā.

eksportētkonst CartProvider = ({bērni}) => {
konst [state, dispatch] = useReducer (cartReducer, {
 preces: [],
 });
konst addToCart = (produkts) => {};
konst noņemt no groza = (id) => {};
konst vērtība = {
 preces: state.items,
 Pievienot grozam,
 izņemt no groza,
 };
atgriezties<GrozsContext. Pakalpojumu sniedzējsvērtību={value}>{bērni}GrozsContext. Pakalpojumu sniedzējs>;
}

Vērtības atbalsts tiek patērēts, izmantojot useContext āķi.

Patērēšanas groza konteksts

Līdz šim esat izveidojis groza kontekstu un izveidojis funkciju useReducer, kas atjaunina grozu. Pēc tam, izmantojot āķi useContext, produkta komponentā izmantosiet groza kontekstu.

Lai konteksta vērtības būtu pieejamas visā lietojumprogrammā, sāciet ar konteksta nodrošinātāju iesaiņojot galveno komponentu index.js.

imports { CartProvider } no"../context/cartContext";
funkcijuMyApp({ Component, pageProps }) {
atgriezties (


 </CartProvider>
 );
}
eksportētnoklusējuma MyApp;

Pēc tam importējiet useContext āķi un groza konteksta nodrošinātāju pakalpojumā Product.js

imports { useContext } no"reaģēt"
imports { CartContext } no"../context/cartContext"
eksportētnoklusējumafunkcijuProdukts() {
konst {items, addToCart, removeFromCart} = useContext (CartContext)
atgriezties (
 <>


{name}</p>

{cena}</p>
Pievienot grozam</button>
 </div>
 </>
 )
}

Pogas funkcija ir atkarīga no tā, vai prece jau ir grozā. Ja prece ir grozā, pogai tā ir jāizņem no groza un, ja prece vēl nav grozā, tā jāpievieno. Tas nozīmē, ka jums ir jāseko līdzi vienuma stāvoklim, izmantojot useEffect un useState. Kods useEffect pārbauda, ​​vai prece atrodas grozā pēc komponenta renderēšanas, kamēr useState atjaunina preces stāvokli.

konst [pastāv, setExists] = useState(viltus);
useEffect(() => {
konst inCart = preces.atrast((lieta) => item.id id);
ja (inCart) {
 setExists(taisnība);
 } cits {
 setExists(viltus);
 } 
}, [preces, id]);

Tagad izmantojiet nosacījumu renderēšanu lai parādītu pogu, pamatojoties uz esošo stāvokli.

atgriezties (


{name}</p>

{cena}</p>
 {
 pastāv
? <poguonClick={() => removeFromCart (id)}> Noņemt no grozapogu>
: <poguonClick={() => addToCart({id, name, price})}> Pievienot grozampogu>
 }
 </div>
)

Ņemiet vērā, ka onClick apdarinātāja funkcijas ir RemoveFromCart un addToCart funkcijas, kas definētas konteksta nodrošinātājā.

Papildu funkcionalitātes pievienošana grozam

Jūs esat iemācījies izveidot iepirkumu grozu, izmantojot konteksta API un useReducer āķi.

Lai gan šajā rokasgrāmatā ir apskatīta tikai pievienošanas un noņemšanas funkcionalitāte, varat izmantot tos pašus jēdzienus, lai pievienotu citas funkcijas, piemēram, groza preču daudzuma pielāgošanu. Izšķirošā lieta ir izpratne par konteksta API un to, kā izmantot āķus, lai atjauninātu groza informāciju.