Marrja e të dhënave nga store në komponent në Redux
Në këtë sesion do të shfaqim të dhënat nga store në komponentin React.
Le të hapim aplikacionin tonë me produktet, të shkojmë
në dosjen parts/products dhe të krijojmë në të
fajllin ProductsList.jsx. Për fillim le të importojmë
në të hook useSelector, me ndihmën e të cilit
do të marrim të dhënat nga store:
import { useSelector } from 'react-redux'
Tani le të marrim produktet nga store.
Funksionin-selector nuk do ta krijojmë veçmas,
do të shkruajmë kodin e saj direkt në parametër për
useSelector:
export const ProductsList = () => {
const products = useSelector((state) => state.products)
}
Pastaj do të shfaqim produktet në mënyrë standarde
në trupin e funksionit ProductsList pas
rreshtit me marrjen e produkteve, duke përdorur
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>
))
Dhe poshtë do të shfaqim dispProducts në layout-in
vijues:
return (
<div>
<h2>Products</h2>
{dispProducts}
</div>
)
Tani mbetet të shfaqim listën tonë të
produkteve në faqen kryesore. Le të hapim
fajllin root.jsx dhe të korrigjojmë titullin:
<h2>This is my first Redux app!</h2>
Në vijim:
<h2>My Products App</h2>
Pastaj importojmë në fajll komponentin
ProductsList:
import { ProductsList } from '../parts/products/ProductsList'
Dhe do ta vendosim atë në div me id main-page
menjëherë pas tagut mbyllës hr:
<ProductsList />
Le të startojmë aplikacionin tonë. Lista jonë nga dy produktet u shfaq me sukses në faqen kryesore.
Hapni aplikacionin tuaj me studentët.
Krijoni fajllin StudentsList.jsx në dosjen
students.
Merrni studentët nga store me ndihmën
e hook useSelector, siç përshkruhet në mësim.
Shfaqni të gjitha fushat me informacionin për
studentët nga state, duke përdorur
map.
Importoni komponentin e marrë
StudentsList në root.jsx dhe
shfaqeni atë në faqen kryesore. Sigurohuni
që e gjithë informacioni për studentët
u shfaq në ekran.