Získávání dat ze store v komponentě v Reduxu

V této lekci zobrazíme data z store v React komponentě.

Otevřeme naši aplikaci s produkty, přejdeme do složky parts/products a vytvoříme v ní soubor ProductsList.jsx. Pro začátek importujeme do něj hook useSelector, pomocí kterého budeme získávat data z store:

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

Nyní získáme produkty z store. Funkci-selektor nebudeme vytvářet zvlášť, její kód napíšeme přímo do parametru pro useSelector:

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

Poté produkty zobrazíme standardním způsobem v těle funkce ProductsList po řádku s získáním produktů, pomocí 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>
))

A níže zobrazíme dispProducts v následujícím kódu:

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

Nyní zbývá zobrazit náš seznam produktů na hlavní stránce. Otevřeme soubor root.jsx a opravíme nadpis:

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

Na následující:

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

Poté importujeme do souboru komponentu ProductsList:

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

A vložíme ji do divu s id main-page hned po uzavíracím tagu hr:

app/root.jsx<ProductsList />

Spustíme naši aplikaci. Náš seznam dvou produktů byl úspěšně zobrazen na hlavní stránce.