Pagina pentru produs în Redux

În această lecție vom crea o pagină separată pentru afișarea informațiilor despre un anumit produs.

Să deschidem aplicația noastră cu produsele și în folderul products să creem fișierul ProductPage.jsx. După cum vă amintiți, fiecare produs al nostru are un id unic. Datorită acestui id vom putea genera o adresă URL unică pentru fiecare produs. Tradițional, va arăta astfel: /products/id123. Și id-ul va fi conținut în partea sa dinamică (vom aborda ruta în sine ceva mai târziu).

Deci, să creem în ProductPage.jsx un component gol ProductPage:

export const ProductPage = () => {}

Primul lucru pe care îl vom face aici - vom folosi hook-ul useParams pentru a extrage partea dinamică a URL-ului pentru pagina produsului pe care ne aflăm:

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

Apoi, folosind id-ul obținut, vom căuta produsul necesar în slice-ul products din store, folosind hook-ul deja cunoscut useSelector:

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

Să nu uităm să importăm ambele hook-uri în fișier:

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

Dacă produsul de care avem nevoie nu este găsit (de exemplu, utilizatorul a introdus o adresă incorectă), atunci vom afișa informații despre aceasta pe ecran. În această etapă, codul pentru componentul ProductPage ar trebui să arate astfel:

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

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

	if (!product) {
		return <p>Nu există un astfel de produs</p>
	}
}

Și ne rămâne doar să afișăm datele obținute ale produsului în marcaj:

return (
	<div>
		<h2>{product.name}</h2>
		<p>Descriere: {product.desc}</p>
		<p>Preț: {product.price}</p>
		<p>Cantitate: {product.amount}</p>
	</div>
)

Deschideți aplicația voastră cu studenții. În folderul students creați fișierul StudentPage.jsx, în care veți obține și afișa informațiile despre studentul selectat.

Cu ajutorul hook-ului react-redux useSelector obțineți informațiile necesare despre student, după cum se arată în lecție.

Afișați în componentă informațiile obținute despre student pe ecran.