Старонка для прадукту ў 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>
)

Адчынiце ваша дадатак са студэнтамі. У тэчцы students стварыце файл StudentPage.jsx, у якім вы будзеце атрымліваць і вывадзiць інфармацыю па абранаму студэнту.

З дапамогай react-redux хука useSelector атрымайце неабходную інфармацыю аб студэнце, як паказана ў уроку.

Вывядзiце ў кампаненце атрыманую інфармацыю аб студэнце на экран.