Pridobivanje podatkov iz store v komponenti v Redux
V tej lekciji bomo prikazali podatke iz store v React komponenti.
Odprimo našo aplikacijo s produkti, pojdimo
v mapo parts/products in ustvarimo v njej
datoteko ProductsList.jsx. Za začetek uvozimo
vanjo kavelj useSelector, s pomočjo katerega
bomo pridobivali podatke iz store:
import { useSelector } from 'react-redux'
Zdaj pa pridobimo produkte iz store.
Funkcije-selektorja ne bomo ustvarili posebej,
njeno kodo bomo napisali kar v parametru za
useSelector:
export const ProductsList = () => {
const products = useSelector((state) => state.products)
}
Nato bomo produkte prikazali na standardni način
v telesu funkcije ProductsList po
vrstici s pridobivanjem produktov, z uporabo
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>
))
In spodaj prikažimo dispProducts v naslednji
postavitvi:
return (
<div>
<h2>Products</h2>
{dispProducts}
</div>
)
Zdaj je treba še prikazati naš seznam
produktov na glavni strani. Odprimo
datoteko root.jsx in popravimo naslov:
<h2>This is my first Redux app!</h2>
Na naslednji:
<h2>My Products App</h2>
Nato uvozimo v datoteko komponento
ProductsList:
import { ProductsList } from '../parts/products/ProductsList'
In vstavimo jo v div z id main-page
takoj za zapiralnim označevalcem hr:
<ProductsList />
Zaženemo našo aplikacijo. Naš seznam iz dveh produktov se je uspešno prikazal na glavni strani.
Odprite vašo aplikacijo s študenti.
Ustvarite datoteko StudentsList.jsx v mapi
students.
Pridobite študente iz store s pomočjo
kavlja useSelector, kot je opisano v lekciji.
Prikažite vsa polja z informacijami o
študentih iz stanja, z uporabo
map.
Uvozite pridobljeno komponento
StudentsList v root.jsx in
jo prikažite na glavni strani. Prepričajte se,
da so se vse informacije o študentih
prikazale na zaslonu.