Halaman Penjual dalam Redux

Hampir siap. Mari dalam sesi ini kita buat perkara terakhir - tambahkan dalam aplikasi kita halaman berasingan untuk setiap penjual. Di sini hanya akan ada tindakan yang sudah anda biasa. Mari kita mulakan.

Buka aplikasi produk kita, dan dalamnya folder sellers. Mari buat dalam folder ini fail SellerPage.jsx. Sekarang mula tulis kod SellerPage untuk komponen kita:

export const SellerPage = () => {}

Pertama, dapatkan id penjual dan gunakannya untuk cari objek penjual yang diperlukan dalam slice:

export const SellerPage = () => {
	let params = useParams()
	const { sellerId } = params

	const seller = useSelector((state) => selectSellerById(state, sellerId))
}

Seterusnya, dalam kod untuk SellerPage selepas mendapatkan penjual, kita akan dapatkan semua produk, kemudian pilih daripadanya hanya yang disenaraikan oleh penjual ini:

const productsOfSeller = useSelector((state) => {
	const allProducts = selectAllProducts(state)
	return allProducts.filter((product) => product.seller === sellerId)
})

Kemudian dari nama produk yang dipilih bentuk senarai menggunakan map. Malah setiap nama produk dalam senarai ini akan menjadi pautan ke halaman produk tersebut:

const productNames = productsOfSeller.map((product) => (
	<li key={product.id}>
		<Link to={`/products/${product.id}`}>{product.name}</Link>
	</li>
))

Dan akhirnya dalam kod untuk SellerPage return markup: tajuk dengan nama penjual dan senarai produk yang disenaraikan oleh penjual ini:

return (
	<div>
	<h2>Penjual: {seller.name}</h2>

	<ul>{productNames}</ul>
	</div>
)

Sudah tentu kita perlukan laluan untuk halaman penjual. Buka fail App.jsx dan tambahkannya sebagai yang terakhir kepada laluan anak:

{
	path: '/sellers/:sellerId',
	element: <SellerPage />,
},

Jangan lupa import hook dan komponen yang diperlukan dalam SellersPage.jsx dan App.jsx.

Mari lancarkan aplikasi kita, muatkan produk, kemudian dalam menu di sebelah kiri klik pautan 'Sellers'. Sekarang kita boleh masuk ke halaman mana-mana penjual dengan mengklik pada namanya, kemudian pada halamannya lihat semua produknya. Dan, dengan mengklik mana-mana daripada produknya, kita akan masuk ke halaman dengan produk tersebut.

Setakat ini semuanya. Kami telah mempelajari asas Redux untuk membina aplikasi dan juga sedikit mendalam. Berkenalan dengan pelbagai alat yang berguna. Saya mengucapkan semoga berjaya dalam mencipta aplikasi Redux anda!

Buka aplikasi pelajar anda. Setelah mempelajari bahan pelajaran, dalam folder teachers buat fail TeacherPage.jsx. Dalam kod komponen TeacherPage dapatkan objek guru yang diperlukan dan semua pelajar pensyarah ini. Gunakan map untuk buat senarai daripadanya, biarkan nama penuh setiap pelajar menjadi pautan ke halaman pelajar ini.

Biarkan dalam markup yang dipulangkan ada tajuk dengan nama penuh pensyarah, di bawahnya ada tajuk yang lebih kecil - dengan subjek yang dia ajar, dan lagi di bawah senarai pelajarnya.

Dalam App.jsx sambungkan satu lagi laluan anak untuk halaman dengan pensyarah.

Lancarkan aplikasi anda dan pastikan semua berfungsi.