Riutilizzo dei dati da una slice in Redux

Nella lezione precedente abbiamo aggiunto al modulo per l'aggiunta del prodotto un altro campo con un menu a discesa per selezionare il venditore che lo pubblica. Supponiamo ora di dover visualizzare queste informazioni in altre parti dell'applicazione. Per fare ciò, non duplicheremo ogni volta il codice, ma creeremo semplicemente un componente separato, in cui estrarremo i dati dalla slice e li visualizzeremo nelle parti dell'applicazione dove ci servono.

Apriamo la nostra applicazione dei prodotti. Ora creiamo nella cartella products un altro file SellerOfProd.jsx. Per cominciare importiamo l'hook useSelector, con cui otterremo la slice con il prodotto necessario:

import { useSelector } from 'react-redux'

Poi estraiamo dallo store il prodotto necessario tramite l'id del venditore, che passeremo al nostro nuovo componente tramite props:

export const SellerOfProd = ({ sellerId }) => {
	const seller = useSelector((state) =>
		state.sellers.find((seller) => seller.id === sellerId)
	)
}

E nel caso in cui tale venditore esista, restituiremo il suo nome, altrimenti restituiremo 'unknown':

return <span>by {seller ? seller.name : 'unknown'}</span>

Ora importiamo il nostro nuovo componente in ProductsList.jsx e inseriamolo nella funzione ProductsList subito dopo il titolo con il nome del prodotto. Come vedete, gli abbiamo passato l'id tramite props:

<SellerOfProd sellerId={product.seller} />

Ora, se avviamo la nostra applicazione, aggiungiamo un nuovo prodotto e lo troviamo nella lista, vedremo che ha un venditore, mentre per i prodotti aggiunti automaticamente all'avvio dell'applicazione, ci sarà 'unknown'.

Una piccola digressione: se il vostro eslint in VS Code segnala un errore su sellerId, ma l'applicazione funziona, potete ignorarlo per ora o aprire il file .eslintrc.cjs della vostra applicazione e in rules aggiungere "react/prop-types": "off".

È ovvio che vorremmo aggiungere le informazioni sul venditore anche nella pagina del prodotto. Per fare ciò, inseriamo nel markup di ProductPage dopo il titolo con il nome del prodotto nuovamente questa riga e verifichiamo che tutto funzioni:

<SellerOfProd sellerId={product.seller} />

Aprite la vostra applicazione con gli studenti. Dopo aver studiato il materiale della lezione, nella cartella students create un file per il componente TeacherForStudent. Il componente deve restituire il nome completo del docente, e accanto tra parentesi la materia che insegna. Trovate il docente necessario utilizzando l'hook useSelector. Se il docente per questo studente non è presente, visualizzate 'anonym'.

Utilizzando il componente ottenuto nella task precedente, visualizzate i dati del docente per ogni studente nella pagina con l'elenco degli studenti.

Fate la stessa cosa della task precedente, ma per la singola pagina dello studente.