Henting av data fra store i en komponent i Redux

I denne økten vil vi vise data fra store i en React-komponent.

La oss åpne applikasjonen vår med produkter, gå inn i mappen parts/products og opprette en fil ProductsList.jsx i den. Til å begynne med importerer vi hooken useSelector, som vi skal bruke for å hente data fra store:

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

La oss nå hente produktene fra store. Vi skal ikke opprette selektorfunksjonen separat, vi skriver koden dens direkte i parameteret til useSelector:

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

Deretter viser vi produktene på standard måte i kroppen av funksjonen ProductsList etter linjen der produktene hentes, ved å bruke 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 oppsett:

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

Nå gjenstår det bare å vise produktlisten vår på hovedsiden. La oss åpne filen root.jsx og endre overskriften:

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

Til følgende:

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

Deretter importerer vi komponenten ProductsList i filen:

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

Og plasserer den i diven med id main-page rett etter den avsluttende taggen hr:

app/root.jsx<ProductsList />

La oss starte applikasjonen vår. Listen vår med to produkter ble vist på hovedsiden.