# Многократное использование данных из слайса в 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'`.

С помощью полученного компонента из предыдущей задачи выведите данные преподавателя для каждого студента на страничке со списком студентов.

Сделайте тоже самое, что и в предыдущей задаче, но для отдельной странички студента.

← →
↑