Halaman untuk Produk dalam Redux

Dalam pelajaran ini, kami akan membuat halaman berasingan untuk memaparkan maklumat tentang produk tertentu.

Buka aplikasi produk kami dan dalam folder products buat fail ProductPage.jsx. Seperti yang anda ingat, setiap produk kami mempunyai id yang unik. Berkat id ini, kami boleh menjana URL halaman yang unik untuk setiap produk. Secara tradisinya, ia akan kelihatan seperti: /products/id123. Dan id akan terkandung dalam bahagian dinamiknya (kami akan uruskan laluan itu tidak lama kemudian).

Jadi, mari dalam ProductPage.jsx kami cipta komponen kosong ProductPage:

export const ProductPage = () => {}

Perkara pertama yang akan kami lakukan di sini ialah menggunakan hook useParams untuk menarik bahagian dinamik URL untuk halaman produk yang kami buka:

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

Seterusnya, dengan menggunakan id yang diperoleh, kami akan cari produk yang diperlukan dalam slice products dalam store, menggunakan hook yang sudah kami kenali useSelector:

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

Jangan lupa untuk import kedua-dua hook ke dalam fail:

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

Jika produk yang kami perlukan tidak ditemui (contohnya, pengguna memasukkan alamat yang tidak betul), maka kami akan memaparkan maklumat tentang perkara itu pada skrin. Pada langkah ini, kod untuk komponen ProductPage sepatutnya kelihatan 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>Tiada produk sedemikian</p>
	}
}

Dan kami hanya perlu memaparkan data produk yang diperoleh dalam markup:

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

Buka aplikasi pelajar anda. Dalam folder students buat fail StudentPage.jsx, di mana anda akan mendapat dan memaparkan maklumat tentang pelajar yang dipilih.

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

Paparkan maklumat yang diperoleh tentang pelajar dalam komponen pada skrin.