Pembaca seperti Anda membantu mendukung MUO. Saat Anda melakukan pembelian menggunakan tautan di situs kami, kami dapat memperoleh komisi afiliasi. Baca selengkapnya.

Keranjang belanja adalah bagian penting dari setiap situs e-niaga. Ini memungkinkan pelanggan untuk menyimpan dan membeli produk.

Di aplikasi e-commerce Next.js, Anda bisa menggunakan Context API dan hook useReducer untuk membuat keranjang. API konteks menyederhanakan pembagian data keranjang antar komponen sementara useReducer menangani status keranjang.

Membuat Halaman Produk

Di folder halaman, buat file baru bernama Product.jsx yang merender satu produk.

eksporbawaanfungsiProduk({id, nama, harga}) {
kembali (


{nama}</p>


{harga}</p>

Komponen produk menerima ID, nama, dan harga produk dan menampilkannya. Ini juga memiliki tombol "Tambahkan ke Troli".

Saat produk sudah ditambahkan ke keranjang, tombol harus beralih ke tombol "hapus dari keranjang" dan jika produk tidak ada di keranjang, halaman tersebut harus menampilkan tombol "Tambahkan ke keranjang".

instagram viewer

Untuk menerapkan fungsi ini, Anda harus melacak item di keranjang menggunakan API konteks dan kait useReducer.

Membuat Keranjang Belanja Menggunakan Context API

API konteks memungkinkan Anda berbagi data di seluruh komponen yang berbeda tanpa harus meneruskan alat peraga secara manual dari induk ke anak. Komponen ini dapat berupa bilah navigasi, halaman detail produk, atau halaman checkout.

Buat file baru bernama cartContext.js di folder bernama konteks dan buat konteksnya.

impor { buatKonteks } dari"reaksi";
eksporconst CartContext = createContext({
 item: [],
});

CartContext mengambil larik item sebagai nilai default.

Selanjutnya, buat penyedia konteks. Penyedia konteks memungkinkan komponen yang menggunakan konteks untuk berlangganan perubahan konteks.

Dalam fungsi baru bernama cartProvider, tambahkan berikut ini:

eksporconst CartProvider = ({ anak-anak }) => {
kembali<CartContext. Pemberi>{anak-anak}CartContext. Pemberi>;
};

Untuk melacak item di keranjang, Anda akan menggunakan kait useReducer.

Kait useReducer berfungsi seperti kait useState kecuali ia membantu mengelola logika keadaan yang lebih kompleks. Ia menerima fungsi peredam dan keadaan awal. Ini mengembalikan keadaan saat ini dan fungsi pengiriman yang meneruskan tindakan ke fungsi peredam.

Buat fungsi baru bernama CartReducer dan tambahkan peredam.

const cartReducer = (negara, tindakan) => {
const { ketik, muatan } = tindakan;
mengalihkan (jenis) {
kasus"MENAMBAHKAN":
kembali {
 ...negara,
 item: muatan.item,
 };


kasus"MENGHAPUS":
kembali {
 ...negara,
 item: muatan.item,
 };
bawaan:
melemparkanbaruKesalahan("Tidak ada kasing untuk jenis itu");
 }
};

Fungsi peredam terdiri dari pernyataan sakelar yang memperbarui status tergantung pada jenis tindakan. Fungsi peredam keranjang memiliki tindakan "TAMBAHKAN" dan "HAPUS" yang masing-masing menambah dan menghapus dari keranjang.

Setelah membuat fungsi peredam, gunakan di hook useReducer. Mulailah dengan membuat fungsi CartProvider. Ini adalah fungsi yang akan memberikan konteks ke komponen lain.

eksporconst CartProvider = ({anak-anak}) => {
kembali<CartContext. Pemberi>{anak-anak}CartContext. Pemberi>;
}

Kemudian, buat hook useReducer.

eksporconst CartProvider = ({ anak-anak }) => {
const [status, pengiriman] = useReducer (cartReducer, { item: [] });
kembali<CartContext. Pemberi>{anak-anak}CartContext. Pemberi>;
};

Fungsi pengiriman bertanggung jawab untuk memperbarui status keranjang, jadi ubah fungsi CartProvider untuk menyertakan fungsi yang mengirimkan produk ke hook useReducer saat keranjang diperbarui.

impor { createContext, useReducer } dari"reaksi";
eksporconst CartProvider = ({ anak-anak }) => {
const [status, pengiriman] = useReducer (cartReducer, initialState);


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


 menugaskan({
 jenis: "MENAMBAHKAN",
 muatan: {
 item: Keranjang yang diperbarui,
 },
 });
 };


const hapusFromCart = (pengenal) => {
const updatedCart = state.items.filter(
 (ProdukArus) =>ProdukArus.id !== id
 );


 menugaskan({
 jenis: "MENGHAPUS",
 muatan: {
 item: Keranjang yang diperbarui,
 },
 });
 };
kembali<CartContext. Pemberi>{anak-anak}CartContext. Pemberi>;
};

Fungsi addToCart menambahkan produk baru ke produk yang sudah ada dan mengembalikan produk yang diperbarui di objek muatan fungsi pengiriman. Demikian pula, fungsi removeFromCart memfilter item berdasarkan ID dan mengembalikan daftar yang diperbarui.

Anda juga perlu mengembalikan prop nilai di penyedia CartContext.

eksporconst CartProvider = ({ anak-anak }) => {
const [status, pengiriman] = useReducer (cartReducer, {
 item: [],
 });
const addToCart = (produk) => {};
const hapusFromCart = (pengenal) => {};


const nilai = {
 item: negara bagian.item,
 Masukkan ke keranjang,
 hapusDariKeranjang,
 };
kembali<CartContext. Pemberinilai={nilai}>{anak-anak}CartContext. Pemberi>;
}

Prop nilai dikonsumsi melalui kait useContext.

Mengkonsumsi Konteks Keranjang

Sejauh ini Anda telah membuat konteks keranjang dan membuat fungsi useReducer yang memperbarui keranjang. Selanjutnya, Anda akan menggunakan konteks keranjang di komponen produk menggunakan kait useContext.

Mulailah dengan membungkus index.js, komponen teratas, dengan penyedia konteks agar nilai konteks tersedia di seluruh aplikasi.

impor { CartProvider } dari"../konteks/keretaKonteks";
fungsiAplikasi Saya({ Komponen, pageProps }) {
kembali (


 </CartProvider>
 );
}
eksporbawaan Aplikasi Saya;

Kemudian impor kait useContext dan penyedia konteks keranjang di Product.js

impor { useContext } dari"reaksi"
impor { CartContext } dari"../konteks/keretaKonteks"
eksporbawaanfungsiProduk() {
const {items, addToCart, removeFromCart} = useContext (CartContext)
kembali (
 <>


{nama}</p>


{harga}</p>

Fungsi tombol tergantung apakah barang sudah ada di keranjang. Jika item ada di troli, tombol harus menghapusnya dari troli dan jika item belum ada di troli, harus menambahkannya. Ini berarti Anda harus melacak status item menggunakan useEffect dan useState. Kode useEffect memeriksa apakah item ada di keranjang setelah komponen dirender sementara useState memperbarui status item.

const [ada, setExists] = useState(PALSU);
gunakanEfek(() => {
const inCart = item.temukan((barang) => id item.id);
jika (inCart) {
 setAda(BENAR);
 } kalau tidak {
 setAda(PALSU);
 } 
}, [item, id]);

Sekarang, menggunakan rendering bersyarat untuk menampilkan tombol berdasarkan status yang ada.

kembali (


{nama}</p>


{harga}</p>
 {
 ada
? <tombolonClick={() => removeFromCart (id)}>Hapus dari Trolitombol>
: <tombolonClick={() => addToCart({id, name, price})}>Tambahkan ke Trolitombol>
 }
 </div>
)

Perhatikan bahwa fungsi penangan onClick adalah fungsi removeFromCart dan addToCart yang ditentukan dalam penyedia konteks.

Menambahkan Lebih Banyak Fungsi ke Troli

Anda telah mempelajari cara membuat keranjang belanja menggunakan API konteks dan hook useReducer.

Meskipun panduan ini hanya membahas fungsi tambah dan hapus, Anda dapat menggunakan konsep yang sama untuk menambahkan lebih banyak fitur seperti menyesuaikan jumlah item keranjang. Yang terpenting adalah memahami API konteks dan cara menggunakan kait untuk memperbarui detail keranjang.