Страница за производ у 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 добијте потребне информације о студенту, како је приказано на часу.

Прикажите у компоненти добијене информације о студенту на екран.