Kako stvoriti košaricu za kupnju u Next.js s kontekstom i upotrebom Reducer

Košarica za kupnju bitan je dio svake web-lokacije za e-trgovinu. Kupcima omogućuje skladištenje i kupnju proizvoda.

U aplikaciji za e-trgovinu Next.js možete koristiti Context API i useReducer kuku za izradu košarice. API konteksta pojednostavljuje dijeljenje podataka o košarici između komponenti dok useReducer upravlja stanjem košarice.

Izrada stranice proizvoda

U mapi stranica stvorite novu datoteku pod nazivom Product.jsx koja prikazuje jedan proizvod.

izvozzadanofunkcijaProizvod({id, ime, cijena}) {
povratak (


{name}</p>

{cijena}</p>
Dodaj u košaricu</button>
 </div>
 )
}

Komponenta proizvoda prihvaća ID, naziv i cijenu proizvoda i prikazuje ih. Također ima gumb "Dodaj u košaricu".

Kada je proizvod već dodan u košaricu, gumb bi se trebao prebaciti na gumb "ukloni iz košarice", a ako proizvod nije u košarici, stranica bi trebala prikazati gumb "Dodaj u košaricu".

Da biste implementirali ovu funkciju, morat ćete pratiti stavke u košarici

koristeći kontekstualni API i useReducer kuka.

Stvaranje košarice za kupnju pomoću Context API-ja

Kontekstni API omogućuje vam dijeljenje podataka između različitih komponenti bez potrebe za ručnim prijenosom rekvizita od roditelja do djeteta. Te komponente mogu biti navigacijska traka, stranica s pojedinostima o proizvodu ili stranica za naplatu.

Napravite novu datoteku pod nazivom cartContext.js u mapi pod nazivom context i stvorite kontekst.

uvoz {stvori kontekst} iz"reagirati";
izvozkonst CartContext = createContext({
 stavke: [],
});

CartContext uzima niz stavki kao zadanu vrijednost.

Zatim stvorite pružatelja konteksta. Davatelj konteksta omogućuje komponentama koje konzumiraju kontekst pretplatu na promjene konteksta.

U novoj funkciji pod nazivom cartProvider dodajte sljedeće:

izvozkonst CartProvider = ({ djeca }) => {
povratak<CartContext. Davatelj>{djeca}CartContext. Davatelj>;
};

Da biste pratili artikle u košarici, koristit ćete kuku useReducer.

UseReducer hook radi kao useState hook osim što pomaže u upravljanju složenijom logikom stanja. Prihvaća reduktorsku funkciju i početno stanje. Vraća trenutno stanje i funkciju otpremanja koja prosljeđuje radnju funkciji reduktora.

Napravite novu funkciju pod nazivom CartReducer i dodajte reduktor.

konst cartReducer = (stanje, djelovanje) => {
konst { vrsta, nosivost } = akcija;
sklopka (tip) {
slučaj"DODATI":
povratak {
 ...država,
 stavke: nosivost.stavke,
 };
slučaj"UKLONITI":
povratak {
 ...država,
 stavke: nosivost.stavke,
 };
zadano:
bacanjenoviGreška("Nema futrole za tu vrstu");
 }
};

Funkcija reduktora sadrži naredbu switch koja ažurira stanje ovisno o vrsti akcije. Funkcija reduktora kolica ima akcije "DODAJ" i "UKLONI" koje dodaju u košaricu odnosno uklanjaju iz košarice.

Nakon što stvorite funkciju reduktora, upotrijebite ga u kuki useReducer. Započnite stvaranjem funkcije CartProvider. Ovo je funkcija koja će pružiti kontekst drugim komponentama.

izvozkonst CartProvider = ({djeca}) => {
povratak<CartContext. Davatelj>{djeca}CartContext. Davatelj>;
}

Zatim izradite kuku useReducer.

izvozkonst CartProvider = ({ djeca }) => {
konst [stanje, otprema] = useReducer (cartReducer, { stavke: [] });
povratak<CartContext. Davatelj>{djeca}CartContext. Davatelj>;
};

Funkcija otpreme odgovorna je za ažuriranje stanja košarice, stoga modificirajte funkciju CartProvider da uključi funkcije koje šalju proizvode na useReducer kuku kada se košarica ažurira.

uvoz { createContext, useReducer } iz"reagirati";
izvozkonst CartProvider = ({ djeca }) => {
konst [stanje, otprema] = useReducer (cartReducer, initialState);
konst dodaj u košaricu = (proizvod) => {
konst updatedCart = [...state.items, product];
 otprema ({
 tip: "DODATI",
 nosivost: {
 stavke: ažurirana košarica,
 },
 });
 };
konst removeFromCart = (iskaznica) => {
konst updatedCart = state.items.filter(
 (currentProduct) => currentProduct.id !== id
 );
 otprema ({
 tip: "UKLONITI",
 nosivost: {
 stavke: ažurirana košarica,
 },
 });
 };
povratak<CartContext. Davatelj>{djeca}CartContext. Davatelj>;
};

Funkcija addToCart dodaje novi proizvod postojećim proizvodima i vraća ažurirane proizvode u objekt nosivosti funkcije otpreme. Isto tako, funkcija removeFromCart filtrira stavku prema ID-u i vraća ažurirani popis.

Također morate vratiti vrijednost prop u pružatelju CartContext.

izvozkonst CartProvider = ({ djeca }) => {
konst [stanje, otprema] = useReducer (cartReducer, {
 stavke: [],
 });
konst dodaj u košaricu = (proizvod) => {};
konst removeFromCart = (iskaznica) => {};
konst vrijednost = {
 stavke: stanje.stavke,
 Dodaj u košaricu,
 removeFromCart,
 };
povratak<CartContext. Davateljvrijednost={vrijednost}>{djeca}CartContext. Davatelj>;
}

Prop vrijednosti konzumira se putem kuke useContext.

Konzumiranje konteksta košarice

Do sada ste stvorili kontekst košarice i izradili funkciju useReducer koja ažurira košaricu. Zatim ćete iskoristiti kontekst košarice u komponenti proizvoda pomoću kuke useContext.

Započnite omotavanjem index.js, gornje komponente, s pružateljem konteksta kako bi vrijednosti konteksta bile dostupne u cijeloj aplikaciji.

uvoz { CartProvider } iz"../context/cartContext";
funkcijaMyApp({ Komponenta, pageProps }) {
povratak (


 </CartProvider>
 );
}
izvozzadano MyApp;

Zatim uvezite useContext hook i pružatelja konteksta košarice u Product.js

uvoz {useContext} iz"reagirati"
uvoz {Kontekst košarice} iz"../context/cartContext"
izvozzadanofunkcijaProizvod() {
konst {items, addToCart, removeFromCart} = useContext (CartContext)
povratak (
 <>


{name}</p>

{cijena}</p>
Dodaj u košaricu</button>
 </div>
 </>
 )
}

Funkcija gumba ovisi o tome nalazi li se artikl već u košarici. Ako artikl postoji u košarici, gumb bi ga trebao ukloniti iz košarice, a ako artikl već nije u košarici, trebao bi ga dodati. To znači da morate pratiti stanje stavke koristeći useEffect i useState. Kod useEffect provjerava je li artikl u košarici nakon renderiranja komponente dok useState ažurira stanje artikla.

konst [postoji, setPostoji] = useState(lažno);
useEffect(() => {
konst inCart = items.find((artikal) => item.id id);
ako (u košarici) {
 setPostoji(pravi);
 } drugo {
 setPostoji(lažno);
 } 
}, [stavke, id]);

Sada, koristiti uvjetno prikazivanje za prikaz gumba na temelju postojećeg stanja.

povratak (


{name}</p>

{cijena}</p>
 {
 postoji
? <dugmena klik={() => removeFromCart (id)}>Ukloni iz košaricedugme>
: <dugmena klik={() => addToCart({id, name, price})}>Dodaj u košaricudugme>
 }
 </div>
)

Imajte na umu da su funkcije rukovatelja onClick funkcije removeFromCart i addToCart definirane u pružatelju konteksta.

Dodavanje više funkcionalnosti u košaricu

Naučili ste kako izraditi košaricu za kupnju pomoću kontekstualnog API-ja i kuke useReducer.

Iako je ovaj vodič pokrivao samo funkciju dodavanja i uklanjanja, možete koristiti iste koncepte za dodavanje više značajki kao što je prilagođavanje količina stavki u košarici. Ključno je razumijevanje kontekstnog API-ja i kako koristiti kuke za ažuriranje pojedinosti o košarici.