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:
import { 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:
export 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:
const 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:
return (
<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:
<h2>This is my first Redux app!</h2>
Na následující:
<h2>My Products App</h2>
Poté importujeme do souboru komponentu
ProductsList:
import { ProductsList } from '../parts/products/ProductsList'
A vložíme ji do divu s id main-page
hned po uzavíracím tagu hr:
<ProductsList />
Spustíme naši aplikaci. Náš seznam dvou produktů byl úspěšně zobrazen na hlavní stránce.
Otevřete vaši aplikaci se studenty.
Vytvořte soubor StudentsList.jsx ve složce
students.
Získejte studenty z store pomocí
hoku useSelector, jak je popsáno v lekci.
Zobrazte všechna pole s informacemi o
studentech ze stavu, pomocí
map.
Importujte získanou komponentu
StudentsList do root.jsx a
zobrazte ji na hlavní stránce. Ujistěte se,
že všechny informace o studentech
se zobrazily na obrazovce.