Faqja e produktit në Redux

Në këtë mësim do të krijojmë një faqe të veçantë për të shfaqur informacionin për një produkt specifik.

Le të hapim aplikacionin tonë me produktet dhe në dosjen products të krijojmë skedarin ProductPage.jsx. Siç e mbani mend, çdo produkt i ynë ka një id unik. Falë këtij id ne do të jemi në gjendje të gjenerojmë një URL unik për faqen e çdo produkti. Tradicionalisht do të duket si: /products/id123. Dhe id do të përmbahet në pjesën e tij dinamike (ne do të merremi me rrugën vetë pak më vonë).

Pra, le të krijojmë në ProductPage.jsx komponentin bosh ProductPage:

export const ProductPage = () => {}

Gjëja e parë që do të bëjmë këtu - do të përdorim hukun useParams, për të nxjerrë pjesën dinamike të URL për faqen e produktit, në të cilën ne jemi:

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

Më pas me id e marrë ne do të kërkojmë produktin e nevojshëm në slicen products në store, duke përdorur hukun e njohur useSelector:

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

Le të mos harrojmë të importojmë të dy huket në skedar:

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

Nëse produkti i nevojshëm nuk gjendet (për shembull, përdoruesi ka futur një adresë të pasaktë), atëherë ne do të shfaqim informacion për këtë në ekran. Në këtë hap kodi për komponentin ProductPage duhet të duket kështu:

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

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

	if (!product) {
		return <p>Nuk ka produkt të tillë</p>
	}
}

Dhe na mbetet vetëm të shfaqim të dhënat e marra të produktit në shabllon:

return (
	<div>
		<h2>{product.name}</h2>
		<p>Përshkrimi: {product.desc}</p>
		<p>Çmimi: {product.price}</p>
		<p>Sasia:{product.amount}</p>
	</div>
)

Hapni aplikacionin tuaj me studentët. Në dosjen students krijojeni skedarin StudentPage.jsx, në të cilin ju do të merrni dhe shfaqni informacionin për studentin e zgjedhur.

Me ndihmën e hukut react-redux useSelector merrni informacionin e nevojshëm për studentin, siç tregohet në mësim.

Shfaqni në komponent informacionin e marrë për studentin në ekran.