Вишеструка употреба података из слајса у 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'.

Помоћу добијене компоненте из претходног задатка прикажите податке предавача за сваког студента на страници са списком студената.

Урадите исто што и у претходном задатку, али за посебну страницу студента.