Πώς να δημιουργήσετε ένα καλάθι αγορών στο Next.js με Context και useReducer

Ένα καλάθι αγορών είναι απαραίτητο μέρος οποιουδήποτε ιστότοπου ηλεκτρονικού εμπορίου. Επιτρέπει στους πελάτες να αποθηκεύουν και να αγοράζουν προϊόντα.

Σε μια εφαρμογή ηλεκτρονικού εμπορίου Next.js, μπορείτε να χρησιμοποιήσετε το Context API και το άγκιστρο useReducer για να δημιουργήσετε ένα καλάθι. Το API περιβάλλοντος απλοποιεί την κοινή χρήση δεδομένων καλαθιού αγορών μεταξύ στοιχείων, ενώ το useReducer χειρίζεται την κατάσταση του καλαθιού.

Δημιουργία σελίδας προϊόντος

Στο φάκελο pages, δημιουργήστε ένα νέο αρχείο που ονομάζεται Product.jsx που αποδίδει ένα μεμονωμένο προϊόν.

εξαγωγήΠροκαθορισμένολειτουργίαΠροϊόν({ID, όνομα, τιμή}) {
ΕΠΙΣΤΡΟΦΗ (


{όνομα}</p>

{τιμή}</p>
Προσθήκη στο καλάθι</button>
 </div>
 )
}

Το στοιχείο προϊόντος αποδέχεται το αναγνωριστικό, το όνομα και την τιμή ενός προϊόντος και το εμφανίζει. Διαθέτει επίσης κουμπί «Προσθήκη στο καλάθι».

Όταν ένα προϊόν έχει ήδη προστεθεί στο καλάθι, το κουμπί πρέπει να μεταβεί σε κουμπί "αφαίρεση από το καλάθι" και εάν ένα προϊόν δεν υπάρχει στο καλάθι, η σελίδα θα πρέπει να εμφανίζει το κουμπί "Προσθήκη στο καλάθι".

Για να εφαρμόσετε αυτήν τη λειτουργία, θα πρέπει να παρακολουθείτε τα αντικείμενα στο καλάθι χρησιμοποιώντας το API περιβάλλοντος και το άγκιστρο useReducer.

Δημιουργία καλαθιού αγορών με χρήση του Context API

Το API περιβάλλοντος σάς επιτρέπει να μοιράζεστε δεδομένα σε διαφορετικά στοιχεία χωρίς να χρειάζεται να μεταβιβάζετε στηρίγματα με μη αυτόματο τρόπο από γονέα σε παιδί. Αυτά τα στοιχεία μπορεί να είναι η γραμμή πλοήγησης, η σελίδα λεπτομερειών προϊόντος ή η σελίδα ολοκλήρωσης αγοράς.

Δημιουργήστε ένα νέο αρχείο που ονομάζεται cartContext.js σε ένα φάκελο που ονομάζεται context και δημιουργήστε το περιβάλλον.

εισαγωγή {createContext } από"αντιδρώ";
εξαγωγήσυνθ CartContext = createContext({
 είδη: [],
});

Το CartContext παίρνει μια σειρά στοιχείων ως προεπιλεγμένη τιμή.

Στη συνέχεια, δημιουργήστε τον πάροχο περιβάλλοντος. Ένας πάροχος περιβάλλοντος επιτρέπει στα στοιχεία που καταναλώνουν το περιβάλλον να εγγραφούν σε αλλαγές περιβάλλοντος.

Σε μια νέα συνάρτηση που ονομάζεται cartProvider, προσθέστε τα εξής:

εξαγωγήσυνθ CartProvider = ({παιδια}) => {
ΕΠΙΣΤΡΟΦΗ<CartContext. Προμηθευτής>{παιδιά}CartContext. Προμηθευτής>;
};

Για να παρακολουθείτε τα αντικείμενα στο καλάθι, θα χρησιμοποιήσετε το άγκιστρο useReducer.

Το άγκιστρο useReducer λειτουργεί όπως το άγκιστρο useState εκτός από το ότι βοηθά στη διαχείριση πιο περίπλοκης λογικής κατάστασης. Δέχεται μια λειτουργία μειωτήρα και την αρχική κατάσταση. Επιστρέφει την τρέχουσα κατάσταση και μια συνάρτηση αποστολής που μεταβιβάζει μια ενέργεια στη λειτουργία μειωτήρα.

Δημιουργήστε μια νέα συνάρτηση που ονομάζεται CartReducer και προσθέστε τον μειωτήρα.

συνθ cartΜειωτής = (κατάσταση, δράση) => {
συνθ { type, payload } = action;
διακόπτης (τύπος) {
υπόθεση"ΠΡΟΣΘΗΚΗ":
ΕΠΙΣΤΡΟΦΗ {
 ...κατάσταση,
 είδη: payload.item,
 };
υπόθεση"ΑΦΑΙΡΩ":
ΕΠΙΣΤΡΟΦΗ {
 ...κατάσταση,
 είδη: payload.item,
 };
Προκαθορισμένο:
βολήνέοςΛάθος(«Καμία περίπτωση για τέτοιου είδους»);
 }
};

Η λειτουργία μειωτήρα περιλαμβάνει μια δήλωση διακόπτη που ενημερώνει την κατάσταση ανάλογα με τον τύπο της ενέργειας. Η λειτουργία μειωτήρα καλαθιού έχει τις ενέργειες "ADD" και "REMOVE" που προσθέτουν στο καλάθι και αφαιρούν από το καλάθι αντίστοιχα.

Αφού δημιουργήσετε τη λειτουργία μειωτήρα, χρησιμοποιήστε τη στο άγκιστρο useReducer. Ξεκινήστε δημιουργώντας τη συνάρτηση CartProvider. Αυτή είναι η συνάρτηση που θα παρέχει το πλαίσιο σε άλλα στοιχεία.

εξαγωγήσυνθ CartProvider = ({παιδιά}) => {
ΕΠΙΣΤΡΟΦΗ<CartContext. Προμηθευτής>{παιδιά}CartContext. Προμηθευτής>;
}

Στη συνέχεια, δημιουργήστε το άγκιστρο useReducer.

εξαγωγήσυνθ CartProvider = ({παιδια}) => {
συνθ [state, dispatch] = useReducer (cartReducer, { είδη: [] });
ΕΠΙΣΤΡΟΦΗ<CartContext. Προμηθευτής>{παιδιά}CartContext. Προμηθευτής>;
};

Η λειτουργία αποστολής είναι υπεύθυνη για την ενημέρωση της κατάστασης του καλαθιού, επομένως τροποποιήστε τη συνάρτηση CartProvider ώστε να περιλαμβάνει λειτουργίες που αποστέλλουν προϊόντα στο άγκιστρο useReducer όταν ενημερώνεται το καλάθι.

εισαγωγή {createContext, useReducer } από"αντιδρώ";
εξαγωγήσυνθ CartProvider = ({παιδια}) => {
συνθ [state, dispatch] = useReducer (cartReducer, initialState);
συνθ addToCart = (προϊόν) => {
συνθ updatedCart = [...state.items, product];
 επιστολή({
 τύπος: "ΠΡΟΣΘΗΚΗ",
 ωφέλιμο φορτίο: {
 είδη: ενημερωμένο Καλάθι,
 },
 });
 };
συνθ removeFromCart = (ταυτότητα) => {
συνθ updatedCart = state.items.filter(
 (currentProduct) => currentProduct.id !== id
 );
 επιστολή({
 τύπος: "ΑΦΑΙΡΩ",
 ωφέλιμο φορτίο: {
 είδη: ενημερωμένο Καλάθι,
 },
 });
 };
ΕΠΙΣΤΡΟΦΗ<CartContext. Προμηθευτής>{παιδιά}CartContext. Προμηθευτής>;
};

Η συνάρτηση addToCart προσαρτά το νέο προϊόν στα υπάρχοντα προϊόντα και επιστρέφει τα ενημερωμένα προϊόντα στο αντικείμενο ωφέλιμου φορτίου της συνάρτησης αποστολής. Ομοίως, η συνάρτηση removeFromCart φιλτράρει το στοιχείο κατά αναγνωριστικό και επιστρέφει την ενημερωμένη λίστα.

Χρειάζεται επίσης να επιστρέψετε την αξία στηρίγματος στον πάροχο CartContext.

εξαγωγήσυνθ CartProvider = ({παιδια}) => {
συνθ [state, dispatch] = useReducer (cartReducer, {
 είδη: [],
 });
συνθ addToCart = (προϊόν) => {};
συνθ removeFromCart = (ταυτότητα) => {};
συνθ τιμή = {
 στοιχεία: state.item,
 προσθήκη στο καλάθι,
 αφαιρέστε από το καλάθι,
 };
ΕΠΙΣΤΡΟΦΗ<CartContext. Προμηθευτήςαξία={αξία}>{παιδιά}CartContext. Προμηθευτής>;
}

Η τιμή prop καταναλώνεται μέσω του άγκιστρου useContext.

Κατανάλωση του πλαισίου του καλαθιού

Μέχρι στιγμής έχετε δημιουργήσει το πλαίσιο καλαθιού και δημιουργήσατε μια συνάρτηση useReducer που ενημερώνει το καλάθι. Στη συνέχεια, θα καταναλώσετε το πλαίσιο καλαθιού στο στοιχείο προϊόντος χρησιμοποιώντας το άγκιστρο useContext.

Ξεκινήστε αναδιπλώνοντας το index.js, το κορυφαίο στοιχείο, με τον πάροχο περιβάλλοντος για να κάνετε τις τιμές περιβάλλοντος διαθέσιμες σε ολόκληρη την εφαρμογή.

εισαγωγή { CartProvider } από"../context/cartContext";
λειτουργίαMyApp({ Component, pageProps }) {
ΕΠΙΣΤΡΟΦΗ (


 </CartProvider>
 );
}
εξαγωγήΠροκαθορισμένο MyApp;

Στη συνέχεια, εισαγάγετε το άγκιστρο useContext και τον πάροχο περιβάλλοντος καλαθιού στο Product.js

εισαγωγή { useContext } από"αντιδρώ"
εισαγωγή { CartContext } από"../context/cartContext"
εξαγωγήΠροκαθορισμένολειτουργίαΠροϊόν() {
συνθ {items, addToCart, removeFromCart} = useContext (CartContext)
ΕΠΙΣΤΡΟΦΗ (
 <>


{όνομα}</p>

{τιμή}</p>
Προσθήκη στο καλάθι</button>
 </div>
 </>
 )
}

Η λειτουργία του κουμπιού εξαρτάται από το αν το προϊόν βρίσκεται ήδη στο καλάθι. Εάν ένα είδος υπάρχει στο καλάθι, το κουμπί πρέπει να το αφαιρέσει από το καλάθι και εάν ένα προϊόν δεν υπάρχει ήδη στο καλάθι, θα πρέπει να το προσθέσει. Αυτό σημαίνει ότι πρέπει να παρακολουθείτε την κατάσταση του αντικειμένου χρησιμοποιώντας το useEffect και το useState. Ο κωδικός useEffect ελέγχει εάν το αντικείμενο βρίσκεται στο καλάθι μετά την απόδοση του στοιχείου, ενώ το useState ενημερώνει την κατάσταση του αντικειμένου.

συνθ [υπάρχει, setExists] = useState(ψευδής);
useEffect(() => {
συνθ inCart = items.find((είδος) => item.id id);
αν (στο καλάθι) {
 setΥπάρχει(αληθής);
 } αλλού {
 setΥπάρχει(ψευδής);
 } 
}, [στοιχεία, id]);

Τώρα, χρήση απόδοσης υπό όρους για να εμφανίσετε το κουμπί με βάση την υπάρχουσα κατάσταση.

ΕΠΙΣΤΡΟΦΗ (


{όνομα}</p>

{τιμή}</p>
 {
 υπάρχει
? <κουμπίστο κλικ={() => removeFromCart (id)}>Κατάργηση από το καλάθικουμπί>
: <κουμπίστο κλικ={() => addToCart({id, name, price})}>Προσθήκη στο καλάθικουμπί>
 }
 </div>
)

Σημειώστε ότι οι συναρτήσεις χειρισμού onClick είναι οι λειτουργίες removeFromCart και addToCart που ορίζονται στον πάροχο περιβάλλοντος.

Προσθήκη περισσότερης λειτουργικότητας στο καλάθι

Έχετε μάθει πώς να δημιουργείτε ένα καλάθι αγορών χρησιμοποιώντας το API περιβάλλοντος και το άγκιστρο useReducer.

Παρόλο που αυτός ο οδηγός καλύπτει μόνο τη λειτουργικότητα προσθήκης και αφαίρεσης, μπορείτε να χρησιμοποιήσετε τις ίδιες έννοιες για να προσθέσετε περισσότερες δυνατότητες, όπως η προσαρμογή των ποσοτήτων των ειδών στο καλάθι. Το κρίσιμο πράγμα είναι να κατανοήσετε το API περιβάλλοντος και πώς να χρησιμοποιήσετε τα άγκιστρα για να ενημερώσετε τις λεπτομέρειες του καλαθιού.