Redux да сотилувчи саҳифаси

Иш ярим тайёр. Келинг, бу дарсда oxирги нарсани қилайлик - бизнинг иловамизга ҳар бир сотилувчи учун алоҳида саҳифа қўшамиз. Бу ерда фақат сизга таниш бўлган амаллар бўлади. Бошлаймиз.

Махсулотларимиз бўлган илованимизни очайлик, ундаги sellers папкасини очийлик. Ушбу папкада SellerPage.jsx файлини яратамиз. Энди компонентимиз учун SellerPage кодини ёза бошлаймиз:

export const SellerPage = () => {}

Бошлаш учун сотилувчининг id сини оламиз ва унга кўра слайсда керакли сотилувчи объектини топамиз:

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

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

Кейин SellerPage учун кодда, сотилувчини олганимиздан сўнг биз барча маҳсулотларни оламиз, сўнгра улардан фақат ўша сотилувчи томонидан қўйилганларини танлаймиз:

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

Кейин танланган маҳсулотлар номларидан map ёрдамида рўйхат яратамиз. Ҳатто ушбу рўйхатдаги ҳар бир маҳсулот номи ўша маҳсулот саҳифасига ҳавола бўлади:

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

Ва SellerPage учун кодни якунида версткани қайтарамиз: сотилувчи номи билан сарлавҳа ва ушбу сотилувчи чиқарган маҳсулотлар рўйхати:

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

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

Албатта бизга сотилувчи саҳифаси учун йўлналиш ҳам керак. App.jsx файлини очиб, уни болалар йўлналишларининг охирига қўшамиз:

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

SellersPage.jsx ва App.jsx файлларига керакли хуклар ва компонентларни импорт қилишни унутманг.

Илованимизни ишга туширамиз, маҳсулотларни юклаймиз, сўнгра чапдаги менюда 'Sellers' ҳаволасини босамиз. Энди биз унинг номини босиб, ҳар қандай сотилувчининг саҳифасига киришимиз мумкин, сўнгра унинг саҳифасида уннинг барча маҳсулотларини кўрамиз. Ва, унинг ҳар қандай маҳсулотини босиб, ўша маҳсулот саҳифасига кирамиз.

Бу ерда ҳозирча барчаси тугалди. Биз илова яратиш учун Redux асосларини ўргандик ва ҳатто бироз чуқурроқ. Турли фойдали асбоблар билан танишдик. Сизнинг Redux-иловаларингизни яратишингизда омad тилаймиз!

Сизнинг ўқувчиларингиз бўлган илованингизни очинг. Дарс материалларини ўрганиб, teachers папкасида TeacherPage.jsx файлини яратинг. TeacherPage компоненти кодида керакли ўқитувчи объектини ва ушбу ўқитувчининг барча ўқувчиларини олинг. map ёрдамида улардан рўйхат яратинг, ҳар бир ўқувчининг ФИО си ўша ўқувчи саҳифасига ҳавола бўлсин.

Қайтарилаётган версткада ўқитувчининг ФИО си билан сарлавҳа, унинг остида кичикроқ сарлавҳа - у ўқитадиган фан билан, ва яна остида унинг ўқувчилари рўйхати бўлсин.

App.jsx файлида ўқитувчи саҳифаси учун яна бир болалар йўлналишини улаинг.

Илованингизни ишга тушириб, ҳаммаси ишлашига ишонч ҳосил қилинг.