Страница за продукт в Redux

В този урок ще направим отделна страница за извеждане на информация за конкретен продукт.

Нека отворим нашето приложение с продукти и в папката products създадем файл ProductPage.jsx. Както помните, всеки наш продукт има уникален id. Благодарение на този id ще можем да генерираме уникален URL адрес на страницата за всеки продукт. Традиционно той ще изглежда така: /products/id123. И id ще се съдържа в неговата динамична част (самият маршрут ще се заемем малко по-късно).

И така, нека в ProductPage.jsx създадем празен компонент ProductPage:

export const ProductPage = () => {}

Първото, което ще направим тук - ще използваме хука useParams, за да извлечем динамичната част от URL адреса за страницата на продукта, на която се намираме:

export const ProductPage = () => {
	let params = useParams()
	const { productId } = params
}

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

const product = useSelector((state) =>
	state.products.find((product) => product.id === productId)
)

Нека не забравяме да импортираме и двата хука във файла:

import { useSelector } from 'react-redux'
import { useParams } from 'react-router-dom'

Ако необходимият ни продукт не бъде намерен (например, потребителят е въвел некоректен адрес), тогава ще изведем информация за това на екрана. На този етап кодът за компонента ProductPage трябва да изглежда така:

export const ProductPage = () => {
	let params = useParams()
	const { productId } = params

	const product = useSelector((state) =>
		state.products.find((product) => product.id === productId)
	)

	if (!product) {
		return <p>Няма такъв продукт</p>
	}
}

И остава само да изведем получените данни за продукта в верстката:

return (
	<div>
		<h2>{product.name}</h2>
		<p>Описание: {product.desc}</p>
		<p>Цена: {product.price}</p>
		<p>Количество:{product.amount}</p>
	</div>
)

Отворете вашето приложение със студенти. В папката students създайте файл StudentPage.jsx, в който ще получавате и извеждате информация за избрания студент.

С помощта на react-redux хука useSelector получете необходимата информация за студента, както е показано в урока.

Изведете в компонента получената информация за студента на екрана.