Halaman untuk Produk di Redux

Pada pelajaran ini, kita akan membuat halaman terpisah untuk menampilkan informasi tentang produk tertentu.

Buka aplikasi kita dengan produk-produk dan di folder products buat file ProductPage.jsx. Seperti yang Anda ingat, setiap produk kita memiliki id yang unik. Berkat id ini kita dapat menghasilkan URL halaman yang unik untuk setiap produk. Secara tradisional, itu akan terlihat seperti: /products/id123. Dan id akan terkandung dalam bagian dinamisnya (kita akan membahas rute itu sendiri beberapa saat kemudian).

Jadi, mari di ProductPage.jsx kita buat komponen kosong ProductPage:

export const ProductPage = () => {}

Hal pertama yang akan kita lakukan di sini adalah menggunakan hook useParams untuk mengambil bagian dinamis dari URL untuk halaman produk, di mana kita berada:

export const ProductPage = () => {
	let params = useParams()
	const { productId } = params
}

Selanjutnya, berdasarkan id yang didapat, kita akan mencari produk yang dibutuhkan di slice products di store, menggunakan hook yang sudah kita kenal useSelector:

const product = useSelector((state) =>
	state.products.find((product) => product.id === productId)
)

Jangan lupa untuk mengimpor kedua hook ke dalam file:

import { useSelector } from 'react-redux'
import { useParams } from 'react-router-dom'

Jika produk yang kita butuhkan tidak ditemukan (misalnya, pengguna memasukkan alamat yang tidak benar), maka kita akan menampilkan informasi tentang hal itu pada layar. Pada langkah ini, kode untuk komponen ProductPage harus terlihat seperti ini:

export const ProductPage = () => {
	let params = useParams()
	const { productId } = params

	const product = useSelector((state) =>
		state.products.find((product) => product.id === productId)
	)

	if (!product) {
		return <p>Tidak ada produk seperti itu</p>
	}
}

Dan tinggal menampilkan data produk yang didapat dalam tampilan:

return (
	<div>
		<h2>{product.name}</h2>
		<p>Deskripsi: {product.desc}</p>
		<p>Harga: {product.price}</p>
		<p>Jumlah:{product.amount}</p>
	</div>
)

Buka aplikasi Anda dengan para siswa. Di folder students buat file StudentPage.jsx, di mana Anda akan mendapatkan dan menampilkan informasi tentang siswa yang dipilih.

Dengan menggunakan hook react-redux useSelector dapatkan informasi yang diperlukan tentang siswa, seperti yang ditunjukkan dalam pelajaran.

Tampilkan informasi yang didapat tentang siswa pada layar di dalam komponen.