Шматразовае выкарыстанне даных са слайса ў 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'.

З дапамогай атрыманага кампанента з папярэдняй задачы вывядзіце даныя выкладчыка для кожнага студэнта на старонцы са спісам студэнтаў.

Зрабіце тое ж самае, што і ў папярэдняй задачы, але для асобнай старонкі студэнта.