Stránka pre produkt v Reduxe

V tejto lekcii vytvoríme samostatnú stránku pre výpis informácií o konkrétnom produkte.

Otvorme našu aplikáciu s produktmi a v priečinku products vytvoríme súbor ProductPage.jsx. Ako si pamätáte, každý náš produkt má unikátne id. Vďaka tomuto id vieme vygenerovať unikátnu URL adresu stránky pre každý produkt. Tradične bude vyzerať ako: /products/id123. A id bude obsiahnuté v jej dynamickej časti (samotným smerovaním sa budeme zaoberať o niečo neskôr).

Takže, v ProductPage.jsx vytvorme prázdnu komponentu ProductPage:

export const ProductPage = () => {}

Prvá vec, ktorú tu urobíme - využijeme hák useParams, aby sme vytiahli dynamickú časť URL pre stránku produktu, na ktorej sa nachádzame:

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

Ďalej podľa získaného id budeme hľadať potrebný produkt v slice products v store, pomocou nám už známeho hák-u useSelector:

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

Nezabudnime importovať oba háky do súboru:

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

Ak sa nám potrebný produkt nenájde (napríklad, používateľ zadal nekorektnú adresu), tak o tom vypíšeme informáciu na obrazovku. V tomto kroku by mal kód pre komponentu ProductPage vyzerať takto:

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

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

	if (!product) {
		return <p>Žiadny taký produkt</p>
	}
}

A ostáva nám už len vypísať získané dáta produktu do verzu:

return (
	<div>
		<h2>{product.name}</h2>
		<p>Popis: {product.desc}</p>
		<p>Cena: {product.price}</p>
		<p>Množstvo: {product.amount}</p>
	</div>
)

Otvorte vašu aplikáciu so študentmi. V priečinku students vytvorte súbor StudentPage.jsx, v ktorom budete dostávať a vypisovať informácie o vybranom študentovi.

S pomocou react-redux hák-u useSelector získajte potrebné informácie o študentovi, ako je ukázané v lekcii.

V komponente vypíšte získané informácie o študentovi na obrazovku.