Získavanie údajov z store v komponente v Reduxe
V tejto lekcii zobrazíme údaje z store v React komponente.
Otvorme našu aplikáciu s produktami, prejdime
do priečinka parts/products a vytvorme v ňom
súbor ProductsList.jsx. Na začiatok importujme
do neho hook useSelector, pomocou ktorého
budeme získavať údaje z store:
import { useSelector } from 'react-redux'
Teraz získajme produkty z store.
Funkciu-selektor nevytvoríme samostatne,
jej kód napíšeme priamo do parametra pre
useSelector:
export const ProductsList = () => {
const products = useSelector((state) => state.products)
}
Potom zobrazíme produkty štandardným spôsobom
v tele funkcie ProductsList po
riadku so získaním produktov, pomocou
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 nižšie zobrazíme dispProducts v nasledujúcom
HTML:
return (
<div>
<h2>Products</h2>
{dispProducts}
</div>
)
Teraz už zostáva len zobraziť náš zoznam
produktov na hlavnej stránke. Otvorme
súbor root.jsx a opravme nadpis:
<h2>This is my first Redux app!</h2>
Na nasledujúci:
<h2>My Products App</h2>
Potom importujme do súboru komponent
ProductsList:
import { ProductsList } from '../parts/products/ProductsList'
A vložme ho do div s id main-page
hneď po zatváracom tagu hr:
<ProductsList />
Spustíme našu aplikáciu. Náš zoznam z dvoch produktov sa úspešne zobrazil na hlavnej stránke.
Otvorte vašu aplikáciu so študentmi.
Vytvorte súbor StudentsList.jsx v priečinku
students.
Získajte študentov z store pomocou
hooku useSelector, ako je popísané v lekcii.
Zobrazte všetky polia s informáciami o
študentoch z stavu, pomocou
map.
Importujte získaný komponent
StudentsList do root.jsx a
zobrazte ho na hlavnej stránke. Uistite sa,
že všetky informácie o študentoch
sa zobrazili na obrazovke.