Strona produktu w Redux

W tej lekcji stworzymy osobną stronę do wyświetlania informacji o konkretnym produkcie.

Otwórzmy naszą aplikację z produktami i w folderze products utwórzmy plik ProductPage.jsx. Jak pamiętasz, każdy nasz produkt ma unikalny id. Dzięki temu id będziemy mogli wygenerować unikalny URL strony dla każdego produktu. Tradycyjnie będzie wyglądać jak: /products/id123. I id będzie zawarte w jego dynamicznej części (samym routingiem zajmiemy się nieco później).

A więc, w ProductPage.jsx stwórzmy pusty komponent ProductPage:

export const ProductPage = () => {}

Pierwsze, co zrobimy tutaj - skorzystamy z huka useParams, aby wyciągnąć dynamiczną część URL dla strony produktu, na której się znajdujemy:

export const ProductPage = () => {
	let params = useParams()
	const { productId } = params
}

Następnie po otrzymanym id poszukamy potrzebnego produktu w slicie products w store, używając już nam znanego huka useSelector:

const product = useSelector((state) =>
	state.products.find((product) => product.id === productId)
)

Nie zapomnijmy zaimportować obu huków do pliku:

import { useSelector } from 'react-redux'
import { useParams } from 'react-router-dom'

Jeśli zaś potrzebny nam produkt nie będzie się znajdować (na przykład, użytkownik wprowadził nieprawidłowy adres), to wyświetlimy informację o tym na ekranie. Na tym etapie kod dla komponentu ProductPage powinien wyglądać tak:

export const ProductPage = () => {
	let params = useParams()
	const { productId } = params

	const product = useSelector((state) =>
		state.products.find((product) => product.id === productId)
	)

	if (!product) {
		return <p>Brak takiego produktu</p>
	}
}

I pozostaje nam tylko wyświetlić otrzymane dane produktu w wersce:

return (
	<div>
		<h2>{product.name}</h2>
		<p>Opis: {product.desc}</p>
		<p>Cena: {product.price}</p>
		<p>Ilość: {product.amount}</p>
	</div>
)

Otwórz twoją aplikację ze studentami. W folderze students utwórz plik StudentPage.jsx, w którym będziesz otrzymywać i wyświetlać informacje o wybranym studencie.

Za pomocą react-redux huka useSelector otrzymaj potrzebne informacje o studencie, jak pokazano w lekcji.

Wyświetl w komponencie otrzymane informacje o studencie na ekranie.