Pagina del prodotto in Redux

In questa lezione creeremo una pagina separata per visualizzare le informazioni su un prodotto specifico.

Apriamo la nostra applicazione di prodotti e nella cartella products creiamo il file ProductPage.jsx. Come ricorderai, ogni nostro prodotto ha un id univoco. Grazie a questo id potremo generare un URL univoco per la pagina di ogni prodotto. Tradizionalmente sarà simile a: /products/id123. E l'id sarà contenuto nella sua parte dinamica (ci occuperemo della route stessa un po' più tardi).

Quindi, in ProductPage.jsx creiamo un componente vuoto ProductPage:

export const ProductPage = () => {}

La prima cosa che faremo qui è utilizzare l'hook useParams per estrarre la parte dinamica dell'URL per la pagina del prodotto in cui ci troviamo:

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

Successivamente, tramite l'id ottenuto, cercheremo il prodotto corrispondente nello slice products nello store, utilizzando l'hook a noi già familiare useSelector:

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

Non dimentichiamo di importare entrambi gli hook nel file:

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

Se il prodotto di cui abbiamo bisogno non viene trovato (ad esempio, l'utente ha inserito un indirizzo non valido), allora visualizzeremo un messaggio a riguardo sullo schermo. A questo punto il codice per il componente ProductPage dovrebbe apparire così:

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

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

	if (!product) {
		return <p>Nessun prodotto trovato</p>
	}
}

E non ci resta che visualizzare i dati ottenuti del prodotto nel markup:

return (
	<div>
		<h2>{product.name}</h2>
		<p>Descrizione: {product.desc}</p>
		<p>Prezzo: {product.price}</p>
		<p>Quantità:{product.amount}</p>
	</div>
)

Apri la tua applicazione con gli studenti. Nella cartella students crea il file StudentPage.jsx, in cui otterrai e visualizzerai le informazioni sullo studente selezionato.

Tramite l'hook useSelector di react-redux ottieni le informazioni necessarie sullo studente, come mostrato nella lezione.

Visualizza nel componente le informazioni ottenute sullo studente sullo schermo.