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' бўлади.

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

Ўзидан-ўзи маълумки, биз сотиб олувчи ҳақида маълумотни маҳсуот саҳифасида ҳам қўшишни истардик. Бунинг учун ProductPage версткасида маҳсулот номи билан сарлавхадан кейин яна бу сатрни қўямиз ва ҳаммаси ишлаётганини текширамиз:

<SellerOfProd sellerId={product.seller} />

Студентлар билан иловангизни очайлик. Дарс маводини ўрганиб, students папкасида TeacherForStudent компоненти учун файл яратинг. Натижада компонент ўқитувчининг ФИОсини қайтарсин, янинида қавс ичида унинг ўқитиши келтирилган фан. Керакли ўқитувчини useSelector хуки ёрдамида топинг. Агар бу студент учун ўқитувчи бўлмаса, 'anonym' чиқаринг.

Олдинги вазифада олинган компонент ёрдамида ҳар бир студент учун ўқитувчи маълумотларини студентлар рўйхати бор саҳифада чиқаринг.

Олдинги вазифадаги каби ишланг, лекин алохида студент саҳифаси учун.