Redux-da Satıcı Səhifəsi

İş az qalıb. Gəlin bu dərsdə son şeyi edək - tətbiqimizə hər bir satıcı üçün ayrı bir səhifə əlavə edək. Burada sizə artıq tanış olan əməliyyatlar olacaq. Başlayaq.

Məhsullarla olan tətbiqimizi açaq, və onun içində sellers qovluğunu. Bu qovluqda SellerPage.jsx faylı yaradaq. İndi komponentimiz üçün SellerPage kodunu yazmağa başlayaq:

export const SellerPage = () => {}

Əvvəlcə satıcının id-sini əldə edək və onunla slice-də lazımi satıcının obyektini tapaq:

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

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

Sonra aşağıda SellerPage kodunda satıcını əldə etdikdən sonra biz bütün məhsulları əldə edəcəyik, sonra isə onlardan yalnız bu satıcı tərəfindən yerləşdirilənləri seçəcəyik:

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

Və sonra seçilmiş məhsulların adlarından map köməyi ilə siyahı yaradacağıq. Üstəlik bu siyahıdakı hər bir məhsulun adı həmin məhsulun səhifəsinə keçid olacaq:

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

Və SellerPage üçün kodun sonunda verstkanı qaytaracağıq: satıcının adı ilə başlıq və bu satıcının yerləşdirdiyi məhsulların siyahısı:

return (
	<div>
	<h2>Satıcı: {seller.name}</h2>

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

Əlbəttə ki, bizim hələ də satıcı səhifəsi üçün marşrut lazımdır. Gəlin App.jsx faylını açaq və onu uşaq marşrutlarının sonuna əlavə edək:

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

SellersPage.jsx və App.jsx fayllarında lazımi hukları və komponentləri import etməyi unutmayın.

Tətbiqimizi işə salaq, məhsulları yükləyək, sonra soldakı menyuda 'Satıcılar' keçidinə klik edək. İndi biz istənilən satıcının səhifəsinə onun adına klikləməklə girə bilərik, sonra isə onun səhifəsində bütün məhsullarını görə bilərik. Və, onun məhsullarından hər hansı birinə klikləməklə, həmin məhsulun səhifəsinə keçə bilərik.

Hələlik bu qədər. Biz tətbiq yaratmaq üçün Redux-un əsaslarını öyrəndik və hətta bir az daha dərinə getdik. Müxtəlif faydalı alətlərlə tanış olduq. Redux tətbiqlərinizi yaratmaqda uğurlar arzulayıram!

Tələbələrinizlə olan tətbiqinizi açın. Dərsin materiallarını öyrənərək, teachers qovluğunda TeacherPage.jsx faylı yaradın. TeacherPage komponentinin kodunda lazımi müəllimin obyektini və bu müəllimin bütün tələbələrini əldə edin. Map köməyi ilə onlardan siyahı yaradın, hər bir tələbənin A.S.A.-sı həmin tələbənin səhifəsinə keçid olsun.

Qaytarılan verstkada sizdə müəllimin A.S.A.-sı ilə başlıq, aşağıda onun dərs etdiyi fənn ilə daha kiçik başlıq, və daha aşağıda onun tələbələrinin siyahısı olsun.

App.jsx faylında müəllim səhifəsi üçün daha bir uşaq marşrutu qoşun.

Tətbiqinizi işə salın və hər şeyin işlədiyinə əmin olun.