Pagina del venditore in Redux

Manca poco. In questa lezione facciamo l'ultima cosa - aggiungiamo alla nostra applicazione una pagina separata per ogni venditore. Qui ci saranno solo azioni a te già familiari. Iniziamo.

Apriamo la nostra applicazione con i prodotti, e in essa la cartella sellers. Creiamo in questa cartella il file SellerPage.jsx. Ora iniziamo a scrivere il codice SellerPage per il nostro componente:

export const SellerPage = () => {}

Per prima cosa otteniamo l'id del venditore e tramite esso troviamo l'oggetto del venditore necessario nello slice:

export const SellerPage = () => {
	let params = useParams()
	const { sellerId } = params

	const seller = useSelector((state) => selectSellerById(state, sellerId))
}

Poi più sotto nel codice per SellerPage dopo aver ottenuto il venditore, otterremo tutti i prodotti, e poi ne selezioneremo solo quelli che sono stati pubblicati da questo venditore:

const productsOfSeller = useSelector((state) => {
	const allProducts = selectAllProducts(state)
	return allProducts.filter((product) => product.seller === sellerId)
})

E poi dai nomi dei prodotti selezionati creeremo una lista usando map. Inoltre ogni nome prodotto in questa lista sarà un link alla pagina di quel prodotto:

const productNames = productsOfSeller.map((product) => (
	<li key={product.id}>
		<Link to={`/products/${product.id}`}>{product.name}</Link>
	</li>
))

E alla fine del codice per SellerPage restituiamo il markup: un titolo con il nome del venditore e la lista dei prodotti che questo venditore ha pubblicato:

return (
	<div>
	<h2>Venditore: {seller.name}</h2>

	<ul>{productNames}</ul>
	</div>
)

Naturalmente ci serve anche una route per la pagina del venditore. Apriamo il file App.jsx e aggiungiamola come ultima tra le route figlie:

{
	path: '/sellers/:sellerId',
	element: <SellerPage />,
},

Non dimenticare di importare gli hook e i componenti necessari in SellersPage.jsx e App.jsx.

Avviamo la nostra applicazione, carichiamo i prodotti, e poi nel menu a sinistra clicchiamo sul link 'Sellers'. Ora possiamo andare sulla pagina di qualsiasi venditore, cliccando sul suo nome, e poi sulla sua pagina vedere tutti i suoi prodotti. E, cliccando su uno qualsiasi dei suoi prodotti, andremo sulla pagina di quel prodotto.

Per ora è tutto. Abbiamo studiato le basi di Redux per creare un'applicazione e anche un po' più a fondo. Abbiamo familiarizzato con vari strumenti utili. Vi auguro buona fortuna nella creazione delle vostre applicazioni Redux!

Apri la tua applicazione con gli studenti. Dopo aver studiato i materiali della lezione, nella cartella teachers crea il file TeacherPage.jsx. Nel codice del componente TeacherPage ottieni l'oggetto con l'insegnante corretto e tutti gli studenti di questo docente. Usando map creane una lista, lascia che il nome completo di ogni studente sia un link alla pagina di quello studente.

Nel markup restituito, lascia che ci sia un titolo con il nome completo del docente, sotto un titolo più piccolo - con la materia che insegna, e ancora sotto la lista dei suoi studenti.

In App.jsx connetti un'altra route figlia per la pagina del docente.

Avvia la tua applicazione e assicurati che tutto funzioni.