Феҳристи фурӯшандагон дар Redux

Дар дарсҳои гузашта мо бо мундариҷаи асосӣ тамом кардем. Акнун бо ёрии thunk мо феҳристи маҳсулотро аз сервер мегирем ва метавонем маҳсули навро дар сервер захира кунем. Биёед бо фурӯшандагон шарҳ кунем. Онҳое ки мо маълумот барояшон мегирем. Биёед саҳифаи ҷудогонае бо феҳристи фурӯшандагон созем.

Барномаи мо бо маҳсулотро кушоед, ва дар он папкаи sellers. Дар ин папка файли SellersList.jsx эҷод мекунем. Дар ин ҷо мо истифода мебарем аз useSelector, Link ва selectAllSellers, ки рамзи онро мо дар sellersSlice.js баъдтар нависем:

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

Баъд худ SellersList-ро месозем. Дар он мо ҳамаи фурӯшандагонро бо ёрии ҳук useSelector мегирем, баъд верстаи барои феҳристи фурӯшандагон дар ҳалқаи map мегирем, ва ҳар як номи фурӯшанда ба саҳифаи худ роҳ мекунад. Ва дар охир верста бо сарлавҳа ва феҳристи гирифташударо бармегардонем:

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>Фурӯшандагон:</h2>

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

Баъд ба файли sellersSlice.js дохил мешавем ва ба монанди селекторҳо дар productsSlice.js дар охири файл ду селектор пас аз экспорти редюсер эҷод мекунем:

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

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

Акнун ба мо роҳи саҳифаи феҳристиро навиштан лозим аст, барои ин файли App.jsx кушода ва дар массиви роҳҳои фарзандии children ягон объекти дигар илова мекунем (компоненти SellersList-ро фаромӯш накунед, ки ворид кунед):

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

То пайванди мо 'Фурӯшандагон' дар меню кор кунад, биёед ба файли root.jsx дароем (чӣ вақте аз ин гузашт... ) ва теги a-ро ба элементи NavLink иваз кунем:

<NavLink to="/sellers" end>
	Фурӯшандагон
</NavLink>

Ва охирин. То дар менюи мо пайванди фаъол мушаххас шавад, ва фаҳмида шавад, ки мо дар кадом саҳифа ҳастем, мо услубро ба index.css илова мекунем:

nav a.active {
	color: purple;
}

Барномаи худро оғоз кунем. Акнун мо метавонем ба саҳифаи фурӯшандагон дароем, бо клик кардан 'Фурӯшандагон' дар меню. Пеш аз ин, албатта, бояд ба 'Маҳсулот' дар меню клик кард, вагарна маҳсулоти мо бор карда намешаванд. Дар дарси оянда мо барои ҳар як фурӯшанда саҳифа созем ва дар ин омӯзиши ин китоби дарсӣ дар бораи Redux ба поён расонем.

Барномаи худро бо донишҷӯён кушоед. Моддаҳои дарсро омӯхта, дар папкаи teachers файли TeachersList.jsx эҷод кунед. Бо ёрии ин компонент шумо феҳристи оғозгузоронро ба намоиш мегузоред. Дар он зарурӣ компонентҳо ва ҳукҳоро ворид кунед.

Барои компоненти TeachersList рамз нависед, дар он ҳамаи оғозгузоронро гиред ва феҳристи оғозгузорон teachersToRender созед, бигзор дар ҳар сатри ин феҳрист насабҳо ва инициалҳои онҳо намоиш дода шаванд, ва дар қавсҳо мавзуъе, ки онҳо меомӯзонанд. Бигзор ҳар як ФИО дар якҷоягӣ пайванде бошанд, ки ба саҳифаи ҷудогона барои ҳар як оғозгузор мебаранд. Баъд дар охири рамзи компонент верста бо сарлавҳа ва феҳристи сохташударо баргардонед.

Дар охири файли teachersSlice.js ҷуфти функсияҳои селектор selectAllTeachers ва selectTeacherById эҷод кунед, чун ки дар дарс нишон дода шуд.

Дар App.jsx роҳи фарзандии дигар барои саҳифаи оғозгузорон пайваст кунед.

Дар файли root.jsx дар меню барои 'Оғозгузорон' теги a-ро ба NavLink иваз кунед, чун ки дар дарс нишон дода шуд. Чунон созед, то пайванди фаъол дар меню чизе мушаххас шавад, барои ин услубҳоро ба index.css илова кунед.