Tuotesivu Reduxissa

Tällä oppitunnilla teemme erillisen sivun tietyn tuotteen tietojen näyttämiseen.

Avataan tuotesovelluksemme ja luodaan kansioon products tiedosto ProductPage.jsx. Kuten muistat, jokaisella tuotteellamme on yksilöllinen id. Tämän id:n avulla voimme luoda yksilöllisen URL-osoitteen jokaiselle tuotteelle. Perinteisesti se näyttää tältä: /products/id123. Ja id sisältyy sen dynaamiseen osaan (reitityksestä huolehdimme hieman myöhemmin).

Joten, luodaan tiedostoon ProductPage.jsx tyhjä komponentti ProductPage:

export const ProductPage = () => {}

Ensimmäinen asia, jonka teemme tässä - hyödynnämme useParams -hookkia, jotta saamme dynaamisen osan URL-osoitteesta tuotesivulle, jolla vihtaamme:

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

Seuraavaksi haetaan saadun id:n perusteella oikea tuote products -slicesta storeen, käyttäen jo tuttua useSelector -hookkia:

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

Älä unohda tuoda molemmat hookit tiedostoon:

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

Jos tarvitsemaamme tuotetta ei löydy (esimerkiksi käyttäjä syötti virheellisen osoitteen), näytämme siitä tiedon ruudulla. Tässä vaiheessa ProductPage -komponentin koodin tulisi näyttää tältä:

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

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

	if (!product) {
		return <p>Tällaista tuotetta ei löydy</p>
	}
}

Ja meidän on enää vain näytettävä haetut tuotetiedot käyttöliittymässä:

return (
	<div>
		<h2>{product.name}</h2>
		<p>Kuvaus: {product.desc}</p>
		<p>Hinta: {product.price}</p>
		<p>Määrä: {product.amount}</p>
	</div>
)

Avaa opiskelijasovelluksesi. Luo kansioon students tiedosto StudentPage.jsx, jossa saat ja näytät valitun opiskelijan tiedot.

react-redux useSelector -hookin avulla haetaan tarvittavat tiedot opiskelijasta, kuten oppitunnilla näytetty.

Näytä komponentissa haetut opiskelijan tiedot ruudulla.