Elenco dei Venditori in Redux

Nelle lezioni precedenti abbiamo terminato il materiale principale. Ora utilizzando thunk otteniamo l'elenco dei prodotti dal server e possiamo salvare un nuovo prodotto sul server. Occupiamoci dei venditori. Dopotutto, riceviamo dati anche per loro. Creiamo una pagina separata con l'elenco dei venditori.

Apriamo la nostra applicazione con i prodotti, e in essa la cartella sellers. Creiamo in questa cartella il file SellersList.jsx. Qui useremo useSelector, Link e selectAllSellers, il cui codice scriveremo in sellersSlice.js più tardi:

import { useSelector } from 'react-redux'
import { Link } from 'react-router-dom'
import { selectAllSellers } from './sellersSlice'

Successivamente creiamo il SellersList stesso. In esso otterremo tutti i venditori usando l'hook useSelector, poi otterremo il markup per la lista dei venditori nel ciclo map, dove ogni nome venditore porterà alla sua pagina. E alla fine restituiremo il markup con il titolo e la lista ottenuta:

export const SellersList = () => {
	const sellers = useSelector(selectAllSellers)
	const sellersToRender = sellers.map((seller) => (
		<li key={seller.id}>
			<Link to={`/sellers/${seller.id}`}>{seller.name}</Link>
		</li>
	))

	return (
		<div>
			<h2>Sellers:</h2>

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

Poi andiamo nel file sellersSlice.js e per analogia con i selettori in productsSlice.js creiamo alla fine del file due selettori dopo l'esportazione del reducer:

export const selectAllSellers = (state) => state.sellers

export const selectSellerById = (state, sellerId) =>
state.sellers.find((seller) => seller.id === sellerId)

Ora dobbiamo definire la rotta per la pagina con l'elenco, per questo apriamo il file App.jsx e nell'array delle rotte figlie children aggiungiamo un altro oggetto (non dimenticare di importare il componente SellersList):

{
	path: '/sellers',
	element: <SellersList />,
},

Per far funzionare il nostro link 'Sellers' nel menu, andiamo nel file root.jsx (che tempo è passato... ) e sostituiamo il tag a con l'elemento NavLink:

<NavLink to="/sellers" end>
	Sellers
</NavLink>

E ultima cosa. Affinché nel nostro menu venga evidenziato il link attivo, e sia chiaro su quale pagina ci troviamo, aggiungeremo uno stile in index.css:

nav a.active {
	color: purple;
}

Avviamo la nostra applicazione. Ora possiamo andare sulla pagina dei venditori, cliccando su 'Sellers' nel menu. Prima, ovviamente, bisogna cliccare su 'Products' nel menu, altrimenti i nostri prodotti non verranno caricati. Nella prossima lezione creeremo una pagina per ogni venditore e concluderemo lo studio di questo tutorial su Redux.

Aprite la vostra applicazione con gli studenti. Studiando i materiali della lezione, nella cartella teachers create il file TeachersList.jsx. Con l'aiuto di questo componente visualizzerete l'elenco degli insegnanti. Importate in esso i componenti e gli hook necessari.

Scrivete il codice per il componente TeachersList, ottenete in esso tutti gli insegnanti e create una lista di insegnanti teachersToRender, fate in modo che in ogni riga di questa lista vengano visualizzati i loro cognomi e iniziali, e tra parentesi la materia che insegnano. Fate in modo che ogni cognome e iniziali sia un link che porta a una pagina separata per ogni insegnante. Poi alla fine del codice del componente restituite il markup con il titolo e la lista creata.

Alla fine del file teachersSlice.js create un paio di funzioni-selettore selectAllTeachers e selectTeacherById, come mostrato nella lezione.

In App.jsx collegate un'altra rotta figlia per la pagina con gli insegnanti.

Nel file root.jsx nel menu per 'Teachers' sostituite il tag a con NavLink, come mostrato nella lezione. Fate in modo che il link attivo nel menu sia in qualche modo evidenziato, aggiungendo a questo scopo degli stili in index.css.