Stranica za proizvod u Redux-u

Na ovoj lekciji ćemo napraviti posebnu stranicu za prikaz informacija o konkretnom proizvodu.

Otvorimo našu aplikaciju sa proizvodima i u folderu products kreirajmo fajl ProductPage.jsx. Kao što se sećate, svaki naš proizvod ima jedinstveni id. Zahvaljujući tom id-u moći ćemo da generišemo jedinstveni URL stranice za svaki proizvod. Tradicionalno će izgledati kao: /products/id123. I id će biti sadržan u njegovom dinamičkom delu (samim rutama ćemo se pozabaviti nešto kasnije).

Dakle, hajde da u ProductPage.jsx kreiramo praznu komponentu ProductPage:

export const ProductPage = () => {}

Prvo što ćemo uraditi ovde je da iskoristimo huk useParams, da izvučemo dinamički deo URL-a za stranicu proizvoda, na kojoj se nalazimo:

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

Zatim po dobijenom id-u ćemo potražiti potreban proizvod u slice-u products u store-u, koristeći nama već poznati huk useSelector:

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

Ne zaboravimo da importujemo oba huka u fajl:

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

Ako potreban proizvod ne bude pronađen (na primer, korisnik je uneo neispravnu adresu), onda ćemo prikazati informaciju o tome na ekranu. Na ovom koraku kod za komponentu ProductPage bi trebalo da izgleda ovako:

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

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

	if (!product) {
		return <p>Nema takvog proizvoda</p>
	}
}

I ostaje nam samo da prikažemo dobijene podatke o proizvodu u verzstiranju:

return (
	<div>
		<h2>{product.name}</h2>
		<p>Opis: {product.desc}</p>
		<p>Cena: {product.price}</p>
		<p>Količina:{product.amount}</p>
	</div>
)

Otvorite vašu aplikaciju sa studentima. U folderu students kreirajte fajl StudentPage.jsx, u kojem ćete dobijati i prikazivati informacije o odabranom studentu.

Pomoću react-redux huka useSelector dobijte potrebne informacije o studentu, kao što je prikazano na lekciji.

Prikažite u komponenti dobijene informacije o studentu na ekranu.