Recupero dei dati dallo store in un componente in Redux
In questa lezione visualizzeremo i dati dallo store in un componente React.
Apriamo la nostra applicazione di prodotti, entriamo
nella cartella parts/products e creiamo al suo interno
il file ProductsList.jsx. Per iniziare importiamo
in esso l'hook useSelector, con il quale
otterremo i dati dallo store:
import { useSelector } from 'react-redux'
Ora recuperiamo i prodotti dallo store.
Non creeremo la funzione selector separatamente,
scriveremo il suo codice direttamente nel parametro per
useSelector:
export const ProductsList = () => {
const products = useSelector((state) => state.products)
}
Quindi visualizzeremo i prodotti nel modo standard
nel corpo della funzione ProductsList dopo
la riga con il recupero dei prodotti, utilizzando
map:
const dispProducts = products.map((product) => (
<div key={product.id}>
<h3>{product.name}</h3>
<p>{product.desc.substring(0, 100)}</p>
<p>Price: {product.price}</p>
<p>Amount: {product.amount}</p>
</div>
))
E sotto visualizzeremo dispProducts nel seguente
markup:
return (
<div>
<h2>Products</h2>
{dispProducts}
</div>
)
Ora non resta che visualizzare la nostra lista
di prodotti nella pagina principale. Apriamo
il file root.jsx e modifichiamo il titolo:
<h2>This is my first Redux app!</h2>
Nel seguente:
<h2>My Products App</h2>
Poi importiamo nel file il componente
ProductsList:
import { ProductsList } from '../parts/products/ProductsList'
E inseriamolo nel div con id main-page
subito dopo il tag di chiusura hr:
<ProductsList />
Avviamo la nostra applicazione. La nostra lista di due prodotti è stata visualizzata con successo nella pagina principale.
Aprite la vostra applicazione con gli studenti.
Create il file StudentsList.jsx nella cartella
students.
Recuperate gli studenti dallo store utilizzando
l'hook useSelector, come descritto nella lezione.
Visualizzate tutti i campi con le informazioni sugli
studenti dallo stato, utilizzando
map.
Importate il componente ottenuto
StudentsList in root.jsx e
visualizzatelo nella pagina principale. Assicuratevi
che tutte le informazioni sugli studenti
siano visualizzate sullo schermo.