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