⊗jsrxPmWFRSD 14 of 57 menu

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.

Italiano
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesia日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
Utilizziamo i cookie per il funzionamento del sito, l'analisi e la personalizzazione. I dati vengono elaborati in conformità con la Politica sulla privacy.
accetta tutto personalizza rifiuta