Redux'теги Сатуучунун Барагы

Иш кичинекей нерсеге калды. Келгиле, бул сабакта акыркы нерсени жасайлы - биздин колдонмого ар бир сатуучу үчүн өзүнчө барак кошолу. Бул жерде сизге мурунтан тааныш аракеттер гана болот. Ишке киришейли.

Өнүмдөр менен биздин колдонмобузду ачалы, анын ичиндеги 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>Сатуучу: {seller.name}</h2>

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

Албетте бизге сатуучунун барагы үчүн маршрут керек. App.jsx файлын ачып, аны балага маршруттардын акырына кошобуз:

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

Зарыл хукаларды жана компоненттерди SellersPage.jsx жана App.jsx файлдарына импорттоону унутпаңыз.

Колдонмобузду иштетип, өнүмдөрдү жүктөп алалы, андан кийин сол жагындагы менюдан 'Сатуучулар' шилтемесине чыкылдайлы. Эми биз каалаган сатуучунун барагына кире алабыз, анын атына чыкылдап, андан кийин анын барагында анын бардык өнүмдөрүн көрө алабыз. Жана анын өнүмдөрүнүн бирөөсүнө чыкылдап, ошол өнүмдүн барагына киребиз.

Азырынча ушуну менен бүттү. Биз колдонмо түзүү үчүн Redux'тун негиздерин изилдедик жана бир аз тереңирээк кирдик. Ар кандай пайдалуу куралдар менен тааныштык. Сиздерге Redux-колдонмолоруңузду түзүүдө ийгилик каалайм!

Студенттер менен сиздин колдонмоңузду ачыңыз. Сабактын материалдарын изилдегенден кийин, teachers папкасында TeacherPage.jsx файлын түзөңүз. TeacherPage компонентинин кодунан сизге керектүү мугалимдин объектин жана ушул окутуучунун бардык студенттерин алыңыз. map жардамы менен алардан тизме түзөңүз, ар бир студенттин ААСы (аты-жөнү) ошол студенттин барагына шилтеме болсун.

Кайтарылган версткада сизде окутуучунун ААСы (аты-жөнү) менен кошумча аталыш болсун, төмөнүрөөк кичирээк аталыш болсун - анын өткөргөн предмети, жана андан да төмөн анын студенттеринин тизмеси болсун.

App.jsx файлына окутуучунун барагы үчүн дагы бир балага маршрутту туташтырыңыз.

Колдонмоңузду иштетип, баары иштей турганына ынаныңыз.