Страница для продукта в 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
получите необходимую информацию о студенте,
как показано в уроке.
Выведите в компоненте полученную информацию о студенте на экран.