Halaman Penjual di Redux

Tinggal sedikit lagi. Mari pada pelajaran ini kita lakukan hal terakhir - tambahkan ke aplikasi kita halaman terpisah untuk setiap penjual. Di sini hanya akan ada tindakan yang sudah familiar bagi Anda. Mari kita mulai.

Buka aplikasi kita dengan produk, dan di dalamnya folder sellers. Buatlah di folder ini file SellerPage.jsx. Sekarang mari tulis kode SellerPage untuk komponen kita:

export const SellerPage = () => {}

Pertama-tama, dapatkan id penjual dan berdasarkan itu temukan objek penjual yang dibutuhkan di slice:

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

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

Selanjutnya, di bawah dalam kode untuk SellerPage setelah mendapatkan penjual, kita akan mendapatkan semua produk, lalu pilih dari mereka hanya yang diposting oleh penjual ini:

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

Kemudian dari nama-nama produk yang dipilih bentuk daftar menggunakan map. Dimana setiap nama produk dalam daftar ini akan menjadi link ke halaman produk tersebut:

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

Dan di akhir kode untuk SellerPage kembalikan markup: judul dengan nama penjual dan daftar produk yang diposting oleh penjual ini:

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

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

Tentu saja kita juga membutuhkan rute untuk halaman penjual. Buka file App.jsx dan tambahkan sebagai yang terakhir ke rute anak:

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

Jangan lupa untuk mengimpor hook dan komponen yang diperlukan ke SellersPage.jsx dan App.jsx.

Jalankan aplikasi kita, muat produk, lalu di menu sebelah kiri klik link 'Sellers'. Sekarang kita bisa masuk ke halaman penjual mana pun, dengan mengklik namanya, lalu di halamannya lihat semua produknya. Dan, dengan mengklik salah satu produknya, kita akan masuk ke halaman dengan produk tersebut.

Sekian untuk saat ini. Kita telah mempelajari dasar-dasar Redux untuk membuat aplikasi dan bahkan sedikit lebih dalam. Berkenalan dengan berbagai alat yang berguna. Semoga sukses dalam membuat aplikasi Redux Anda!

Buka aplikasi Anda dengan siswa. Setelah mempelajari materi pelajaran, di folder teachers buat file TeacherPage.jsx. Dalam kode komponen TeacherPage dapatkan objek dengan guru yang dibutuhkan dan semua siswa dari pengajar ini. Dengan menggunakan map buatlah dari mereka sebuah daftar, biarkan nama lengkap setiap siswa menjadi link ke halaman siswa tersebut.

Biarkan dalam markup yang dikembalikan ada judul dengan nama lengkap pengajar, di bawahnya ada judul yang lebih kecil - dengan mata pelajaran, yang dia ajarkan, dan di bawahnya daftar siswanya.

Di App.jsx sambungkan satu rute anak lagi untuk halaman dengan pengajar.

Jalankan aplikasi Anda dan pastikan bahwa semuanya bekerja.