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

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