Redux-da Sotuvchi Sahifasi

Isl qolgan narsa juda oz. Keling, ushbu darsda oxirgi narsani qilaylik - ilovamizga har bir sotuvchi uchun alohida sahifa qo'shamiz. Bu yerda sizga tanish bo'lgan harakatlar mavjud. Keling, boshlaymiz.

Mahsulotlar bilan ilovamizni ochamiz, unda sellers papkasini ochamiz. Ushbu papkada SellerPage.jsx faylini yaratamiz. Endi komponentimiz uchun SellerPage kodini yozishni boshlaymiz:

export const SellerPage = () => {}

Boshlash uchun sotuvchi id sini olamiz va unga ko'ra slice ichida kerakli sotuvchi obyektini topamiz:

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

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

Keyin, SellerPage uchun kodda sotuvchini olganimizdan keyin, barcha mahsulotlarni olamiz, so'ngra ularning ichidan faqat ushbu sotuvchi tomonidan joylashtirilganlarini tanlaymiz:

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

Keyin esa tanlangan mahsulotlarning nomlaridan map yordamida ro'yxat yaratamiz. Bundan tashqari, ushbu ro'yxatdagi har bir mahsulot nomi o'sha mahsulot sahifasiga havola bo'ladi:

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

Va SellerPage uchun kodning oxirida verstkani qaytaramiz: sotuvchi nomi bilan sarlavha va ushbu sotuvchi tomonidan joylashtirilgan mahsulotlar ro'yxati:

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

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

Albatta, bizga sotuvchi sahifasi uchun marshrut ham kerak. App.jsx faylini ochamiz va uni oxirgi bola marshrut sifatida qo'shamiz:

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

SellersPage.jsx va App.jsx fayllariga kerakli huklar va komponentlarni import qilishni unutmang.

Ilovamizni ishga tushiramiz, mahsulotlarni yuklab olamiz, so'ngra chap menuda 'Sellers' havolasini bosamiz. Endi biz har qanday sotuvchi sahifasiga uning nomini bosish orqali kirishimiz mumkin, so'ngra uning sahifasida uning barcha mahsulotlarini ko'rishimiz mumkin. Va, uning har qanday mahsulotini bosish orqali, o'sha mahsulot sahifasiga kiramiz.

Hozircha hammasi shu. Biz ilova yaratish uchun Redux asoslarini o'rgandik va hatto biroz chuqurroq ham. Turli foydali asboblar bilan tanishdik. Sizning Redux-ilovalaringizni yaratishda omad tilayman!

Talabalar bilan ilovangizni oching. Dars materiallarini o'rgangan holda, teachers papkasida TeacherPage.jsx faylini yarating. TeacherPage komponenti kodida kerakli o'qituvchi obyektini va ushbu o'qituvchining barcha talabalarini oling. map yordamida ularning ro'yxatini yarating, har bir talabaning FISH i ushbu talaba sahifasiga havola bo'lsin.

Qaytariladigan verstkada o'qituvchi FISH i bilan sarlavha bo'lsin, undan keyin kichikroq sarlavha bo'lsin - u o'qitadigan fan bilan, undan pastroqda esa uning talabalari ro'yxati bo'lsin.

App.jsx faylida o'qituvchi sahifasi uchun yana bir bola marshrutni ulang.

Ilovangizni ishga tushiring va hammasi ishlashiga ishonch hosil qiling.