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:

parts/products/ProductsList.jsximport { 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:

parts/products/ProductsList.jsxexport 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:

parts/products/ProductsList.jsxconst 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:

parts/products/ProductsList.jsxreturn (
  <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:

app/root.jsx<h2>This is my first Redux app!</h2>

Nel seguente:

app/root.jsx<h2>My Products App</h2>

Poi importiamo nel file il componente ProductsList:

app/root.jsximport { ProductsList } from '../parts/products/ProductsList'

E inseriamolo nel div con id main-page subito dopo il tag di chiusura hr:

app/root.jsx<ProductsList />

Avviamo la nostra applicazione. La nostra lista di due prodotti è stata visualizzata con successo nella pagina principale.