Stran za izdelek v Redux

V tej lekciji bomo naredili ločeno stran za prikaz informacij o določenem izdelku.

Odprimo našo aplikacijo z izdelki in v mapi products ustvarimo datoteko ProductPage.jsx. Kot se spomnite, ima vsak naš izdelek edinstven id. Zahvaljujoč temu id-ju bomo lahko generirali edinstven URL naslov strani za vsak izdelek. Tradicionalno bo videti kot: /products/id123. In id bo vsebovan v njenem dinamičnem delu (s samo potjo se bomo ukvarjali nekoliko kasneje).

Torej, v ProductPage.jsx ustvarimo prazen komponent ProductPage:

export const ProductPage = () => {}

Prva stvar, ki jo bomo naredili tukaj - uporabili bomo hook useParams, da izvlečemo dinamični del URL-ja za stran izdelka, na kateri smo:

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

Nato bomo po prejetem id-ju poiskali ustrezen izdelek v slice products v store, z uporabo nam že znanega hooka useSelector:

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

Ne pozabimo importati obeh hookov v datoteko:

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

Če želenega izdelka ne najdemo (na primer, uporabnik je vnesel napačen naslov), bomo o tem izpisali informacijo na zaslon. Na tej stopnji naj bi koda za komponent ProductPage izgledala takole:

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

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

	if (!product) {
		return <p>Ni takega izdelka</p>
	}
}

In preostane nam le še, da prejete podatke izdelka prikažemo v razporeditvi:

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

Odprite vašo aplikacijo s študenti. V mapi students ustvarite datoteko StudentPage.jsx, v kateri boste pridobivali in prikazovali informacije o izbranem študentu.

Z react-redux hookom useSelector pridobite potrebne informacije o študentu, kot je prikazano v lekciji.

V komponentu prikažite prejete informacije o študentu na zaslon.