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' чыгарыңыз.

Мурунку маселеден алынган компоненттин жардамы менен ар бир студент үчүн мугалимдин маалыматтарын студенттердин тизмеси бар баракчада чыгарыңыз.

Мурунку маселенин дал ушундайын жасаңыз, бирок студенттин өзүнчө баракчасы үчүн.