Redux-da sotuvchilar ro'yxati

Oldingi darslarda biz asosiy materialni tugatdik. Endi thunk yordamida biz serverdan mahsulotlar ro'yxatini olamiz va serverga yangi mahsulotni saqlay olamiz. Keling, sotuvchilar bilan shug'ullanamiz. Axir, biz ular uchun ham ma'lumot olamiz. Keling, sotuvchilar ro'yxati uchun alohida sahifa yarataylik.

Mahsulotlar ilovamizni ochamiz, va uning ichidagi sellers papkasiga kiramiz. Ushbu papkada SellersList.jsx faylini yaratamiz. Bu yerda biz useSelector, Link va selectAllSellers dan foydalanamiz, uning kodini biz keyinroq sellersSlice.js da yozamiz:

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

Keyin SellersList ning o'zini yaratamiz. Unda biz barcha sotuvchilarni useSelector hooki yordamida olamiz, keyin map tsikli yordamida sotuvchilar ro'yxati uchun verstkani olamiz, har bir sotuvchi nomi uning sahifasiga olib boradi. Va oxirida sarlavha va olingan ro'yxat bilan verstkani qaytaramiz:

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>Sellers:</h2>

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

Keyin sellersSlice.js fayliga kiramiz va o'xshashlik bilan productsSlice.js dagi selektorlar kabi fayl oxirida, reducer eksportidan keyin ikkita selektor yaratamiz:

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

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

Endi biz ro'yxat sahifasi uchun marshrutni belgilashimiz kerak, buning uchun App.jsx faylini ochamiz va bolalar marshrutlari massivi children ga yana bir obyekt qo'shamiz (SellersList komponentini import qilishni unutmang):

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

Menyudagi 'Sellers' havolamiz ishlashi uchun, keling, root.jsx fayliga kiramiz (oh, uzoq vaqt bo'ldi ... ) va a tegnini NavLink elementiga almashtiramiz:

<NavLink to="/sellers" end>
	Sellers
</NavLink>

Va oxirgi narsa. Menyumizda faol havola ajralib turishi va qaysi sahifada ekanligimiz aniq bo'lishi uchun, biz index.css ga uslub qo'shamiz:

nav a.active {
	color: purple;
}

Ilovamizni ishga tushiramiz. Endi biz menyudagi 'Sellers' ni bosish orqali sotuvchilar sahifasiga kirishimiz mumkin. Albatta, oldin menyudagi 'Products' ni bosish kerak, aks holda mahsulotlarimiz yuklanmaydi. Keyingi darsda biz har bir sotuvchi uchun sahifa yaratamiz va Redux bo'yicha ushbu o'quv qo'llanmani o'rganishni tugatamiz.

Talabalar ilovingizni oching. Dars materiallarini o'rgangan holda, teachers papkasida TeachersList.jsx faylini yarating. Ushbu komponent yordamida siz o'qituvchilar ro'yxatini chiqarasiz. Unga kerakli komponentlar va hooklarni import qiling.

TeachersList komponenti uchun kod yozing, unda barcha o'qituvchilarni oling va teachersToRender o'qituvchilar ro'yxatini yarating, har bir qatorda ularning familiyasi va bosh harflari ko'rsatilsin, qavs ichida esa ularning o'qitadigan fanlari. Har bir FIO alohida sahifaga olib boradigan havola bo'lsin. Keyin komponent kodi oxirida sarlavha va yaratilgan ro'yxat bilan verstkani qaytaring.

teachersSlice.js fayli oxirida selectAllTeachers va selectTeacherById funktsiyalari-selektorlar juftligini yarating, darsda ko'rsatilgandek.

App.jsx da o'qituvchilar sahifasi uchun yana bir bolalar marshrutini ulang.

root.jsx faylida menyuda 'Teachers' uchun a tegnini NavLink ga almashtiring, darsda ko'rsatilgandek. Faol havola menyuda ajralib turishi uchun, buning uchun index.css ga uslublarni qo'shing.