Reduxда сотилувчилар рўйхати

Олдинги дарсларда биз асосий material билан якунладик. Энди thunk ёрдамида биз сервердан маҳсулотлар рўйхатини оламиз ва серверда янги маҳсулотни сақлай оламиз. Келинг, сотилувчилар билан иш кўриб чиқайлик. Axir биз улар учун ҳам маълумот оламиз. Келинг, сотилувчилар рўйхати бўлган алохида саҳифа ясайлик.

Маҳсулотлар дастуримизни ochamiz, ундаги sellers папкасини ochamiz. Ушбу папкада SellersList.jsx файлини яратамиз. Биз бу ерда useSelector, Link ва selectAllSellersдан фойдаланамиз, унинг кодини биз keyinroq sellersSlice.js файлида ёзамиз:

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

Keyin SellersList ни яратамиз. Унда биз useSelector хуки ёрдамида барча сотилувчиларни оламиз, сўнгра map циклида сотилувчилар рўйхати учун верстка оламиз, ҳар бир сотилувчи номи бизни унинг саҳифасига олиб боради. Ва oxirida sarlavha ва олинган рўйхат билан версткани қайтарамиз:

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 файлига кирамиз ва ўхшаш productsSlice.js файлидаги селекторлар каби унга ўхшаш редьюсер экспортидан кейин файлнинг eng oxirida иккита селектор яратамиз:

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

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

Энди биз рўйхат саҳифаси учун маршрутни ёзишимиз керак, бунинг учун App.jsx файлини ochib, children бола маршрутлар массивига яна бир объект қўшамиз (SellersList компонентини импорт қилишни унутманг):

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

Менюдаги 'Sellers' ҳаволамиз ишлаши учун, root.jsx файлига кирамиз (канчадан бери бу ... ) ва a тегини NavLink элементига алмаштирамиз:

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

Ва oxirги иш. Менюда фаол ҳавола ajралиб туриши учун, биз қайси саҳифада эканимиз аник бўлиши учун, биз index.css файлига uslub қўшамиз:

nav a.active {
	color: purple;
}

Дастуримизни ишга туширамиз. Энди биз менюдаги 'Sellers' устига босиб, сотилувчилар саҳифасига кира оламиз. Албатта, аввал менюдаги 'Products' устига босиб кўйишингиз керак, акс ҳолда маҳсулотларимиз юкланмайди. Keyingi дарсда биз ҳар бир сотилувчи учун алохида саҳифа ястамиз ва Redux буйича ўқув дастурини ўрганишни якунламиз.

Сизнинг ўқувчилар дастурингизни oching. Дарс materialларини ўрганиб чиққандан сўнг, teachers папкасида TeachersList.jsx файлини яратинг. Ушбу компонент ёрдамида сиз ўқитувчилар рўйхатини чиқарасиз. Унга зарур бўлган компонент ва хукларни импорт қилинг.

TeachersList компоненти учун код ёзинг, унда барча ўқитувчиларни олинг ва teachersToRender ўқитувчилар рўйхатини яратинг, har bir ўқитувчининг фамилияси ва инициаллари кўрсатилсин, qavs ichida уларнинг ўқитиш фанлари кўрсатилсин. Ҳар бир ФИО ҳавола бўлиб, у ҳар бир ўқитувчининг алохида саҳифасига олиб боради. Сўнгра компонент кодининг oxirida sarlavha ва яратилган рўйхат билан версткани қайтаринг.

teachersSlice.js файлининг oxirida жуфт функция-селекторлар selectAllTeachers ва selectTeacherById ни яратинг, дарсда кўрсатилгани каби.

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

root.jsx файлидаги менюда 'Teachers' учун a тегини NavLink биан алмаштиринг, дарсда кўрсатилгани каби. Фаол ҳавола менюда ажралиб туриши учун, бунинг учун index.css файлига uslub қўшинг.