Cititorii ca tine ajută la sprijinirea MUO. Când efectuați o achiziție folosind link-uri de pe site-ul nostru, este posibil să câștigăm un comision de afiliat. Citeşte mai mult.

Un coș de cumpărături este o parte esențială a oricărui site de comerț electronic. Le permite clienților să stocheze și să cumpere produse.

Într-o aplicație de comerț electronic Next.js, puteți utiliza API-ul Context și cârligul useReducer pentru a crea un coș. API-ul context simplifică partajarea datelor coșului între componente, în timp ce useReducer se ocupă de starea coșului.

Crearea paginii de produs

În folderul pagini, creați un fișier nou numit Product.jsx care redă un singur produs.

exportMod implicitfuncţieProdus({id, nume, preț}) {
întoarcere (


{nume}</p>


{preț}</p>

Componenta de produs acceptă ID-ul, numele și prețul unui produs și le afișează. Are, de asemenea, un buton „Adaugă în coș”.

Când un produs este deja adăugat în coș, butonul ar trebui să treacă la un buton „eliminare din coș”, iar dacă un produs nu se află în coș, pagina ar trebui să afișeze butonul „Adaugă în coș”.

instagram viewer

Pentru a implementa această funcționalitate, va trebui să urmăriți articolele din coș folosind API-ul context și cârligul useReducer.

Crearea unui coș de cumpărături utilizând API-ul Context

API-ul context vă permite să partajați date între diferite componente fără a fi necesar să transmiteți recuzită manual de la părinte la copil. Aceste componente pot fi bara de navigare, pagina cu detaliile produsului sau pagina de finalizare a comenzii.

Creați un fișier nou numit cartContext.js într-un folder numit context și creați contextul.

import { createContext } din"reacţiona";
exportconst CartContext = createContext({
 articole: [],
});

CartContext ia o matrice de articole ca valoare implicită.

Apoi, creați furnizorul de context. Un furnizor de context permite componentelor care consumă contextul să se aboneze la modificări de context.

Într-o funcție nouă numită cartProvider, adăugați următoarele:

exportconst CartProvider = ({copii}) => {
întoarcere<CartContext. Furnizor>{copii}CartContext. Furnizor>;
};

Pentru a urmări articolele din coș, veți folosi cârligul useReducer.

Cârligul useReducer funcționează ca și cârligul useState, cu excepția faptului că ajută la gestionarea logicii stărilor mai complexe. Acceptă o funcție de reductor și starea inițială. Returnează starea curentă și o funcție de expediere care transmite o acțiune funcției de reducere.

Creați o nouă funcție numită CartReducer și adăugați reductorul.

const cartReducer = (stare, acțiune) => {
const { tip, sarcină utilă } = acțiune;
intrerupator (tip) {
caz"ADĂUGA":
întoarcere {
 ...stat,
 articole: payload.items,
 };


caz"ELIMINA":
întoarcere {
 ...stat,
 articole: payload.items,
 };
Mod implicit:
aruncanouEroare(„Nici un caz pentru acest tip”);
 }
};

Funcția de reducere cuprinde o instrucțiune switch care actualizează starea în funcție de tipul de acțiune. Funcția de reducere a căruciorului are acțiuni „ADD” și „REMOVE” care se adaugă în coș și, respectiv, se scot din coș.

După crearea funcției de reducere, utilizați-o în cârligul useReducer. Începeți prin a crea funcția CartProvider. Aceasta este funcția care va oferi context celorlalte componente.

exportconst CartProvider = ({copii}) => {
întoarcere<CartContext. Furnizor>{copii}CartContext. Furnizor>;
}

Apoi, creați cârligul useReducer.

exportconst CartProvider = ({copii}) => {
const [state, dispatch] = useReducer (cartReducer, { articole: [] });
întoarcere<CartContext. Furnizor>{copii}CartContext. Furnizor>;
};

Funcția de expediere este responsabilă pentru actualizarea stării coșului, așa că modificați funcția CartProvider pentru a include funcții care trimit produse către cârligul useReducer atunci când coșul se actualizează.

import { createContext, useReducer } din"reacţiona";
exportconst CartProvider = ({copii}) => {
const [state, dispatch] = useReducer (cartReducer, initialState);


const addToCart = (produs) => {
const updatedCart = [...state.items, product];


 expediere({
 tip: "ADĂUGA",
 sarcină utilă: {
 articole: coș actualizat,
 },
 });
 };


const removeFromCart = (id) => {
const updatedCart = state.items.filter(
 (currentProduct) => currentProduct.id !== id
 );


 expediere({
 tip: "ELIMINA",
 sarcină utilă: {
 articole: coș actualizat,
 },
 });
 };
întoarcere<CartContext. Furnizor>{copii}CartContext. Furnizor>;
};

Funcția addToCart atașează noul produs la produsele existente și returnează produsele actualizate în obiectul de încărcare utilă al funcției de expediere. De asemenea, funcția removeFromCart filtrează articolul după ID și returnează lista actualizată.

De asemenea, trebuie să returnați valoarea prop în furnizorul CartContext.

exportconst CartProvider = ({copii}) => {
const [state, dispatch] = useReducer (cartReducer, {
 articole: [],
 });
const addToCart = (produs) => {};
const removeFromCart = (id) => {};


const valoare = {
 articole: state.items,
 adaugă in coş,
 removeFromCart,
 };
întoarcere<CartContext. Furnizorvaloare={valoare}>{copii}CartContext. Furnizor>;
}

Valoarea prop este consumată prin intermediul cârligului useContext.

Consumarea contextului căruciorului

Până acum ați creat contextul coșului și ați creat o funcție useReducer care actualizează coșul. Apoi, veți consuma contextul coșului din componenta produsului folosind cârligul useContext.

Începeți prin a include index.js, componenta de sus, cu furnizorul de context pentru a face valorile contextului disponibile în întreaga aplicație.

import { CartProvider } din„../context/cartContext”;
funcţieMyApp({ Componentă, pageProps }) {
întoarcere (


 </CartProvider>
 );
}
exportMod implicit MyApp;

Apoi importați cârligul useContext și furnizorul de context al coșului în Product.js

import { useContext } din"reacţiona"
import { CartContext } din„../context/cartContext”
exportMod implicitfuncţieProdus() {
const {items, addToCart, removeFromCart} = useContext (CartContext)
întoarcere (
 <>


{nume}</p>


{preț}</p>

Funcția butonului depinde dacă articolul este deja în coș. Dacă un articol există în coș, butonul ar trebui să-l scoată din coș, iar dacă un articol nu este deja în coș, ar trebui să-l adauge. Aceasta înseamnă că trebuie să urmăriți starea articolului folosind useEffect și useState. Codul useEffect verifică dacă articolul se află în coș după ce componenta este redată, în timp ce useState actualizează starea articolului.

const [există, setExists] = useState(fals);
useEffect(() => {
const inCart = items.find((articol) => item.id id);
dacă (în coș) {
 setExists(Adevărat);
 } altfel {
 setExists(fals);
 } 
}, [articole, id]);

Acum, utilizați redarea condiționată pentru a afișa butonul în funcție de starea existentă.

întoarcere (


{nume}</p>


{preț}</p>
 {
 există
? <butononClick={() => removeFromCart (id)}>Eliminați din coșbuton>
: <butononClick={() => addToCart({id, name, price})}>Adaugă în coșbuton>
 }
 </div>
)

Rețineți că funcțiile de gestionare onClick sunt funcțiile removeFromCart și addToCart definite în furnizorul de context.

Adăugarea de mai multe funcționalități la coș

Ați învățat cum să creați un coș de cumpărături folosind API-ul context și cârligul useReducer.

Chiar dacă acest ghid a acoperit doar funcționalitățile de adăugare și eliminare, puteți folosi aceleași concepte pentru a adăuga mai multe funcții, cum ar fi ajustarea cantităților de articole din coș. Lucrul crucial este înțelegerea contextului API și a modului de utilizare a cârligelor pentru a actualiza detaliile căruciorului.