Повторно използване на данни от slice в Redux

В предишния урок добавихме към формата за добавяне на продукт още едно поле с падащо меню за избор на продавач, който го публикува. Да предположим, че сега трябва да изведем тази информация още в няколко места в приложението. За това няма да дублираме кода всеки път, а просто ще създадем отделен компонент, в който ще извличаме данните от slice и ще ги извеждаме в тези части на приложението, където е необходимо.

Нека отворим нашето приложение с продукти. Сега в папката products нека създадем още един файл SellerOfProd.jsx. Като начало импортираме hook-а useSelector, с помощта на който ще получим slice с необходимия продукт:

import { useSelector } from 'react-redux'

След това ще извлечем от store необходимия продукт по id на продавача, който ще подаваме на нашия нов компонент в props:

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 в props:

<SellerOfProd sellerId={product.seller} />

Сега, ако стартираме нашето приложение, добавим нов продукт и го намерим в списъка, ще видим, че той има продавач, а при автоматично добавените продукти при стартиране на приложението, ще има 'unknown'.

Малко отклонение: ако вашият eslint в редактора VS Code се оплаква от sellerId, а приложението работи, можете засега да игнорирате това или да отворите файла .eslintrc.cjs на вашето приложение и в rules да добавите "react/prop-types": "off".

Разбира се, бихме искали да добавим информация за продавача и на страницата на продукта. За това ще поставим в рендъра на ProductPage след заглавието с името на продукта отново този ред и ще проверим, че всичко работи:

<SellerOfProd sellerId={product.seller} />

Отворете вашето приложение със студенти. След като изучихте материала от урока, в папката students създайте файл за компонента TeacherForStudent. В резултат компонентът трябва да връща имената на преподавателя, а до тях в скоби предмета, който той преподава. Необходимия преподавател намерете с помощта на hook-а useSelector. Ако преподавател за дадения студент липсва, изведете 'anonym'.

С помощта на получения компонент от предишната задача изведете данни за преподавателя за всеки студент на страницата със списък със студенти.

Направете същото като в предишната задача, но за отделната страница на студента.