Деректерді Redux слайсынан бірнеше рет қолдану

Алдыңғы сабақта біз өнімді қосу формасына оны орналастыратын сатушыны таңдау үшін ашылмалы тізімі бар тағы бір өріс қостық. Енді бізге бұл ақпаратты қолданудың тағы birнеше жерінде көрсету керек делік. Ол үшін біз кодты әр жолы көшірмейміз, тек бөлек компонент жасаймыз, онда біз деректерді слайстан алып, бізге қажет бөліктерде көрсетеміз.

Өнімдерімізбен қолдануымызды ашайық. Енді 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' шығарыңыз.

Алдыңғы тапсырмада алынған компоненттің көмегімен студенттер тізімі бар бетте әрбір студент үшін оқытушы деректерін шығарыңыз.

Алдыңғы тапсырмадағыдай істеңіз, бірақ студенттің жеке беті үшін.