Adatok lekérése a store-ból komponensben Redux-ban

Ezen az órán a store-ból származó adatokat fogjuk megjeleníteni egy React komponensben.

Nyissuk meg a termékekkel kapcsolatos alkalmazásunkat, lépjünk be a parts/products mappába és hozzunk létre benne egy ProductsList.jsx fájlt. Kezdetként importáljuk be a useSelector hook-ot, amely segítségével adatokat fogunk kérni a store-ból:

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

Most pedig kérjük le a termékeket a store-ból. A szelektor függvényt nem hozzuk létre külön, írjuk be a kódját közvetlenül a useSelector paraméterébe:

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

Ezután a termékeket szabványos módon jelenítjük meg a ProductsList függvény törzsében, a termékek lekérése után, a map használatával:

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>
))

Alul pedig jelenítsük meg a dispProducts-t a következő HTML szerkezetben:

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

Már csak a terméklistánk megjelenítése van hátra a főoldalon. Nyissuk meg a root.jsx fájlt és módosítsuk a címet:

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

Erre:

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

Ezután importáljuk a fájlba a ProductsList komponenst:

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

És helyezzük el a main-page azonosítójú div-ben, közvetlenül a hr záró tagje után:

app/root.jsx<ProductsList />

Indítsuk el az alkalmazásunkat. A két termékből álló listánk sikeresen megjelent a főoldalon.