Czytelnicy tacy jak ty pomagają wspierać MUO. Kiedy dokonujesz zakupu za pomocą linków na naszej stronie, możemy otrzymać prowizję partnerską. Czytaj więcej.

Koszyk jest istotną częścią każdego sklepu internetowego. Umożliwia klientom przechowywanie i zakup produktów.

W aplikacji e-commerce Next.js możesz użyć interfejsu API kontekstu i haka useReducer, aby utworzyć koszyk. Kontekstowy interfejs API upraszcza udostępnianie danych koszyka między komponentami, podczas gdy useReducer obsługuje stan koszyka.

Tworzenie strony produktu

W folderze pages utwórz nowy plik o nazwie Product.jsx, który renderuje pojedynczy produkt.

eksportdomyślnyfunkcjonowaćProdukt({identyfikator, nazwa, cena}) {
powrót (


{nazwa}</p>


{cena}</p>

Składnik produktu akceptuje identyfikator, nazwę i cenę produktu i wyświetla je. Posiada również przycisk „Dodaj do koszyka”.

Gdy produkt jest już dodany do koszyka, przycisk powinien zmienić się w przycisk „usuń z koszyka”, a jeśli produktu nie ma w koszyku, na stronie powinien pojawić się przycisk „Dodaj do koszyka”.

instagram viewer

Aby wdrożyć tę funkcję, musisz śledzić pozycje w koszyku za pomocą kontekstowego API i hak useReducer.

Tworzenie koszyka przy użyciu interfejsu API kontekstu

Kontekstowy interfejs API umożliwia udostępnianie danych między różnymi komponentami bez konieczności ręcznego przekazywania rekwizytów z rodzica na dziecko. Te komponenty mogą być paskiem nawigacyjnym, stroną szczegółów produktu lub stroną kasy.

Utwórz nowy plik o nazwie cartContext.js w folderze o nazwie context i utwórz kontekst.

import { stwórz kontekst } z"reagować";
eksportkonst CartContext = utwórzkontekst({
 rzeczy: [],
});

CartContext przyjmuje tablicę elementów jako wartość domyślną.

Następnie utwórz dostawcę kontekstu. Dostawca kontekstu umożliwia komponentom korzystającym z kontekstu subskrybowanie zmian kontekstu.

W nowej funkcji o nazwie cartProvider dodaj:

eksportkonst Dostawca koszyka = ({ dzieci }) => {
powrót<Kontekst koszyka. Dostawca>{dzieci}Kontekst koszyka. Dostawca>;
};

Aby śledzić pozycje w koszyku, użyj haka useReducer.

Hak useReducer działa jak hak useState, z wyjątkiem tego, że pomaga zarządzać bardziej złożoną logiką stanu. Akceptuje funkcję reduktora i stan początkowy. Zwraca bieżący stan i funkcję wysyłającą, która przekazuje akcję do funkcji redukującej.

Utwórz nową funkcję o nazwie CartReducer i dodaj reduktor.

konst wózekReduktor = (stan, czynność) => {
konst { typ, ładunek } = akcja;
przełącznik (typ) {
sprawa"DODAĆ":
powrót {
 ...państwo,
 przedmioty: ładunek.przedmioty,
 };


sprawa"USUNĄĆ":
powrót {
 ...państwo,
 przedmioty: ładunek.przedmioty,
 };
domyślny:
rzucićnowyBłąd(„Brak przypadku dla tego typu”);
 }
};

Funkcja redukcji zawiera instrukcję switch, która aktualizuje stan w zależności od rodzaju akcji. Funkcja reduktora wózka ma akcje „DODAJ” i „USUŃ”, które odpowiednio dodają do koszyka i usuwają z niego.

Po utworzeniu funkcji reducer użyj jej w haku useReducer. Zacznij od utworzenia funkcji CartProvider. Jest to funkcja, która zapewni kontekst innym komponentom.

eksportkonst Dostawca koszyka = ({dzieci}) => {
powrót<Kontekst koszyka. Dostawca>{dzieci}Kontekst koszyka. Dostawca>;
}

Następnie utwórz hak useReducer.

eksportkonst Dostawca koszyka = ({ dzieci }) => {
konst [stan, wysyłka] = useReducer (cartReducer, { rzeczy: [] });
powrót<Kontekst koszyka. Dostawca>{dzieci}Kontekst koszyka. Dostawca>;
};

Funkcja wysyłki jest odpowiedzialna za aktualizację stanu koszyka, więc zmodyfikuj funkcję CartProvider, aby zawierała funkcje wysyłające produkty do haka useReducer podczas aktualizacji koszyka.

import { utwórz kontekst, użyj reduktora } z"reagować";
eksportkonst Dostawca koszyka = ({ dzieci }) => {
konst [stan, wysyłka] = useReducer (cartReducer, initialState);


konst dodaj do koszyka = (produkt) => {
konst updatedCart = [...state.items, product];


 załatwić({
 typ: "DODAĆ",
 ładunek: {
 pozycje: zaktualizowany koszyk,
 },
 });
 };


konst usuń z koszyka = (ID) => {
konst zaktualizowanyKoszyk = stan.przedmioty.filtr(
 (bieżący produkt) => bieżący produkt.id !== id
 );


 załatwić({
 typ: "USUNĄĆ",
 ładunek: {
 pozycje: zaktualizowany koszyk,
 },
 });
 };
powrót<Kontekst koszyka. Dostawca>{dzieci}Kontekst koszyka. Dostawca>;
};

Funkcja addToCart dołącza nowy produkt do istniejących produktów i zwraca zaktualizowane produkty w obiekcie ładunku funkcji wysyłki. Podobnie funkcja removeFromCart odfiltrowuje element według identyfikatora i zwraca zaktualizowaną listę.

Musisz również zwrócić atrybut wartości w dostawcy CartContext.

eksportkonst Dostawca koszyka = ({ dzieci }) => {
konst [stan, wysyłka] = useReducer (cartReducer, {
 rzeczy: [],
 });
konst dodaj do koszyka = (produkt) => {};
konst usuń z koszyka = (ID) => {};


konst wartość = {
 przedmioty: stan.przedmioty,
 Dodaj do koszyka,
 usuń z koszyka,
 };
powrót<Kontekst koszyka. Dostawcawartość={wartość}>{dzieci}Kontekst koszyka. Dostawca>;
}

Właściwa wartość jest zużywana przez hak useContext.

Korzystanie z kontekstu koszyka

Do tej pory stworzyłeś kontekst koszyka i stworzyłeś funkcję useReducer, która aktualizuje koszyk. Następnie wykorzystasz kontekst koszyka w komponencie produktu za pomocą haka useContext.

Zacznij od opakowania index.js, najwyższego komponentu, z dostawcą kontekstu, aby udostępnić wartości kontekstu w całej aplikacji.

import { Dostawca koszyka } z„../kontekst/kontekst koszyka”;
funkcjonowaćMojaAplikacja({ Komponent, pageProps }) {
powrót (


 </CartProvider>
 );
}
eksportdomyślny MojaAplikacja;

Następnie zaimportuj hak useContext i dostawcę kontekstu koszyka w Product.js

import { useContext } z"reagować"
import { Kontekst koszyka } z„../kontekst/kontekst koszyka”
eksportdomyślnyfunkcjonowaćProdukt() {
konst {items, addToCart, removeFromCart} = useContext (CartContext)
powrót (
 <>


{nazwa}</p>


{cena}</p>

Funkcja przycisku zależy od tego, czy przedmiot znajduje się już w koszyku. Jeśli pozycja istnieje w koszyku, przycisk powinien ją usunąć z koszyka, a jeśli pozycji nie ma jeszcze w koszyku, powinien ją dodać. Oznacza to, że musisz śledzić stan elementu za pomocą useEffect i useState. Kod useEffect sprawdza, czy przedmiot znajduje się w koszyku po wyrenderowaniu komponentu, podczas gdy useState aktualizuje stan elementu.

konst [istnieje, setExists] = useState(FAŁSZ);
użyjEfekt(() => {
konst inCart = pozycje.znajdź((przedmiot) => identyfikator elementu);
Jeśli (w wózku) {
 zestawIstnieje(PRAWDA);
 } w przeciwnym razie {
 zestawIstnieje(FAŁSZ);
 } 
}, [elementy, id]);

Teraz, użyj renderowania warunkowego aby wyświetlić przycisk na podstawie istniejącego stanu.

powrót (


{nazwa}</p>


{cena}</p>
 {
 istnieje
? <przyciskna kliknięcie={() => removeFromCart (id)}>Usuń z koszykaprzycisk>
: <przyciskna kliknięcie={() => addToCart({id, nazwa, cena})}>Dodaj do koszykaprzycisk>
 }
 </div>
)

Należy zauważyć, że funkcje obsługi onClick to funkcje removeFromCart i addToCart zdefiniowane w dostawcy kontekstu.

Dodanie większej funkcjonalności do koszyka

Nauczyłeś się tworzyć koszyk przy użyciu kontekstowego API i haka useReducer.

Mimo że ten przewodnik omówił tylko funkcję dodawania i usuwania, możesz użyć tych samych koncepcji, aby dodać więcej funkcji, takich jak dostosowanie ilości pozycji w koszyku. Kluczową rzeczą jest zrozumienie kontekstowego API i sposobu używania haków do aktualizacji szczegółów koszyka.