Stránka pro produkt v Redux

V této lekci vytvoříme samostatnou stránku pro zobrazení informací o konkrétním produktu.

Otevřeme naši aplikaci s produkty a ve složce products vytvoříme soubor ProductPage.jsx. Jak si pamatujete, každý náš produkt má jedinečné id. Díky tomuto id můžeme vygenerovat jedinečnou URL adresu stránky pro každý produkt. Tradičně bude vypadat jako: /products/id123. A id bude obsaženo v její dynamické části (samotnou routou se budeme zabývat o něco později).

Takže, pojďme v ProductPage.jsx vytvořit prázdnou komponentu ProductPage:

export const ProductPage = () => {}

První věc, kterou zde uděláme - použijeme hook useParams, abychom získali dynamickou část URL pro stránku produktu, na které se nacházíme:

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

Dále podle získaného id budeme hledat požadovaný produkt ve slici products v store, pomocí nám již známého hooku useSelector:

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

Nezapomeneme importovat oba hooky do souboru:

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

Pokud se požadovaný produkt nenajde (například uživatel zadal neplatnou adresu), zobrazíme na obrazovce informaci o této situaci. V tomto kroku by měl kód pro komponentu ProductPage vypadat 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>Žádný takový produkt</p>
	}
}

A zbývá nám pouze zobrazit získané údaje o produktu ve verzi:

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

Otevřete vaši aplikaci se studenty. Ve složce students vytvořte soubor StudentPage.jsx, ve kterém budete získávat a zobrazovat informace o vybraném studentovi.

S pomocí react-redux hooku useSelector získejte potřebné informace o studentovi, jak je ukázáno v lekci.

V komponentě zobrazte získané informace o studentovi na obrazovce.