Redux-də Satıcıların Siyahısı

Əvvəlki dərslərdə biz əsas materialla başladıq. İndi thunk köməyi ilə biz məhsulların siyahısını serverdən alırıq və serverdə yeni məhsulu saxlaya bilərik. Gəlin satıcılarla məşğul olaq. Axı biz onlar üçün də məlumat alırıq. Gəlin ayrıca bir səhifə yaradaq, satıcıların siyahısı ilə.

Məhsullarla olan tətbiqimizi açaq, və onun içində sellers qovluğu. Bu qovluqda fayl SellersList.jsx yaradaq. Burada biz useSelector, Link və selectAllSellers istifadə edəcəyik, onun kodunu biz sellersSlice.js faylında bir az sonra yazacayıq:

import { useSelector } from 'react-redux'
import { Link } from 'react-router-dom'
import { selectAllSellers } from './sellersSlice'

Sonra özümüz SellersList yaradaq. Onda biz bütün satıcıları useSelector hooku ilə alacayıq, sonra satıcıların siyahısı üçün verilməni map dövründə alacayıq, hər bir satıcının adı onun səhifəsinə keçid olacaq. Və sonda başlıq və alınmış siyahı ilə verilməni qaytaracayıq:

export const SellersList = () => {
	const sellers = useSelector(selectAllSellers)
	const sellersToRender = sellers.map((seller) => (
		<li key={seller.id}>
			<Link to={`/sellers/${seller.id}`}>{seller.name}</Link>
		</li>
	))

	return (
		<div>
			<h2>Satıcılar:</h2>

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

Sonra sellersSlice.js faylına keçək və oxşar şəkildə productsSlice.js faylındakı selektorlar kimi, faylın ən sonunda, reducerin eksportundan sonra iki selektor yaradaq:

export const selectAllSellers = (state) => state.sellers

export const selectSellerById = (state, sellerId) =>
state.sellers.find((seller) => seller.id === sellerId)

İndi bizim üçün siyahı səhifəsi üçün marşrutu yazmaq lazımdır, bunun üçün App.jsx faylını açaq və uşaq marşrutlarının massivinə children daha bir obyekt əlavə edək (SellersList komponentini import etməyi unutmayın):

{
	path: '/sellers',
	element: <SellersList />,
},

Menyudakı 'Satıcılar' keçidimizin işləməsi üçün, gəlin root.jsx faylına keçək (nə qədər vaxt keçib... ) və a teqini NavLink elementi ilə əvəz edək:

<NavLink to="/sellers" end>
	Satıcılar
</NavLink>

Və sonuncu. Bizim menyuda aktiv keçidin vurğulanması üçün, və hansı səhifədə olduğumuzun başa düşülməsi üçün, biz index.css faylına stil əlavə edəcəyik:

nav a.active {
	color: purple;
}

Tətbiqimizi işə salaq. İndi biz menyuda 'Satıcılar' üzərinə klikləməklə satıcıların səhifəsinə keçə bilərik. Əlbəttə, əvvəlcə menyuda 'Məhsullar' üzərinə klikləmək lazımdır, əks halda məhsullarımız yüklənməyəcək. Növbəti dərsdə biz hər bir satıcı üçün səhifə yaradacayıq və Redux üzrə bu dərsliyin öyrənilməsini bitirəcəyik.

Tələbələrinizlə olan tətbiqinizi açın. Dərsin materiallarını öyrənərək, teachers qovluğunda TeachersList.jsx faylını yaradın. Bu komponentin köməyi ilə siz müəllimlərin siyahısını çıxaracaqsınız. Ora lazımi komponentləri və hookları import edin.

TeachersList komponenti üçün kod yazın, onda bütün müəllimləri alın və müəllimlərin siyahısını teachersToRender hazırlayın, qoy bu siyahının hər sətirində onların soyadları və baş hərfləri göstərilsin, mötərizədə isə onların dərs dediyi fənn. Qoy hər bir FİA birlikdə hər bir müəllim üçün ayrıca səhifəyə aparan keçid olsun. Sonra komponentin kodunun sonunda başlıq və yaradılmış siyahı ilə verilməni qaytarın.

teachersSlice.js faylının sonunda dərsdə göstərildiyi kimi selectAllTeachers və selectTeacherById cüt funksiya-selektorlar yaradın.

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

root.jsx faylında menyuda 'Müəllimlər' üçün a teqini NavLink ilə əvəz edin, dərsdə göstərildiyi kimi. Aktiv keçidin menyuda nəyəsə görə vurğulanması üçün, buna görə index.css faylına stil əlavə edin.