Маълумоти борҳоӣ аз слайс дар Redux-и такрорӣ истифода бурдан

Дар дарси гузашта мо ба шакли илова кардани маҳсулот як майдони дигар бо рӯйхати таназзулӣ барои интихоби фурӯшанда илова кардем, ки онро нашр мекунад. Фарз мекунем, акнун мо ин маълумотро низ лозим дорем дар якчанд ҷойҳои дигари барнома низ чоп кунем. Барои ин мо ҳар дафъа кодро такрор намекунем, танҳо як компоненти ҷудогона эҷод мекунем, ки дар он маълумотро аз слайс гирифта ва дар он қисмҳои барнома, ки ба мо лозим аст, чоп мекунем.

Барномаи мо бо маҳсулотро кушоем. Ҳоло дар ҷузвадон products эҷод кунем як файли дигар SellerOfProd.jsx. Барои оғоз хуки useSelector-ро ворид кунем, бо ёрии он мо слайси бо маҳсулоти дилхоҳ гирифта метавонем:

import { useSelector } from 'react-redux'

Сипас аз store маҳсулоти дилхоҳро гирем ба воситаи id-и фурӯшанда, ки мо онро ба компоненти нави худ дар пропсҳо мефиристем:

export const SellerOfProd = ({ sellerId }) => {
	const seller = useSelector((state) =>
		state.sellers.find((seller) => seller.id === sellerId)
	)
}

Ва дар сурате, ки чунин фурӯшанда мавҷуд аст, мо номи онро бармегардонем, ва агар не, пас 'unknown'-ро бармегардонем:

return <span>by {seller ? seller.name : 'unknown'}</span>

Ҳоло компоненти нави худро ба ProductsList.jsx ворид кунем ва гузорем онро дар функсияи ProductsList дафъатан баъд аз сарлавҳа бо номи маҳсулот. Ҳамон тавре ки шумо мебинед, мо ба он дар пропсҳо id-ро фиристодем:

<SellerOfProd sellerId={product.seller} />

Акнун, агар мо барномаи худро оғоз кунем, маҳсулоти нав илова кунем ва онро дар рӯйхат пайдо кунем, мебинем, ки фурӯшанда барои он пайдо шудааст, ва барои маҳсулоте, ки ба таври худкор оғози барнома илова шуда буданд, 'unknown' хоҳад буд.

Як муносибати хурд: агар eslint-и шумо дар редактори VS Code ба sellerId шикоят кунад, ва барнома кор кунад, пас шумо метавонед ҳоло инро нодида гиред ё файли .eslintrc.cjs-и барномаи худро кушоед ва дар rules илова кунед "react/prop-types": "off".

Худ ба худ маълум аст, ки мо мехостем маълумоти фурӯшандаро илова кунем ва дар саҳифаи маҳсулот. Барои ин дар версткаи ProductPage баъд аз сарлавҳа бо номи маҳсулот ин сатрро боз такрор кунем ва санҷем, ки ҳама чиз кор мекунад:

<SellerOfProd sellerId={product.seller} />

Барномаи худро бо донишҷӯён кушоед. Моддаи дарсро омӯхта, дар ҷузвадон students файл барои компоненти TeacherForStudent эҷод кунед. Дар натиҷа компонент бояд НМФ-и омӯзгорро баргардонад, ва дар канора дар қавсҳо фаннеро, ки ӯ дарс медиҳад. Омӯзгори дилхоҳро бо ёрии хуки useSelector пайдо кунед. Агар омӯзгор барои ин донишҷӯ вуҷуд надошта бошад, 'anonym'-ро чоп кунед.

Бо ёрии компоненти гирифташуда аз вазифаи гузашта маълумоти омӯзгорро барои ҳар як донишҷӯ дар саҳифаи рӯйхати донишҷӯён чоп кунед.

Ҳамон кореро, ки дар вазифаи гузашта кардед, аммо барои саҳифаи ҷудогонаи донишҷӯ анҷом диҳед.