# Страница для продукта в 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>No such product</p> } }`

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

`return ( <div> <h2>{product.name}</h2> <p>Description: {product.desc}</p> <p>Price: {product.price}</p> <p>Amount:{product.amount}</p> </div> )`

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

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

Выведите в компоненте полученную информацию о студенте на экран.

← →
↑