Hent data fra store i en komponent i Redux

I denne lektion vil vi vise data fra store i en React komponent.

Lad os åbne vores produktapplikation, gå ind i mappen parts/products og oprette en fil i den kaldet ProductsList.jsx. Til at starte med vil vi importere hook'et useSelector, som vi vil bruge til at hente data fra store:

parts/products/ProductsList.jsximport { useSelector } from 'react-redux'

Lad os nu hente produkterne fra store. Vi vil ikke oprette selector-funktionen separat, vi skriver dens kode direkte i parameteren til useSelector:

parts/products/ProductsList.jsxexport const ProductsList = () => {
  const products = useSelector((state) => state.products)
}

Herefter vil vi vise produkterne på standard vis i kroppen af funktionen ProductsList efter linjen med hentning af produkter, ved at bruge 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>
))

Og nedenfor viser vi dispProducts i følgende opmærkning:

parts/products/ProductsList.jsxreturn (
  <div>
    <h2>Products</h2>
    {dispProducts}
  </div>
)

Nu mangler vi bare at vise vores liste med produkter på hovedsiden. Lad os åbne filen root.jsx og rette overskriften:

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

Til følgende:

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

Herefter importerer vi i filen komponenten ProductsList:

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

Og indsætter den i div'en med id main-page lige efter den lukkende hr-tag:

app/root.jsx<ProductsList />

Lad os starte vores applikation. Vores liste med to produkter blev vist succesfuldt på hovedsiden.