Store-dan melumatlarin komponentde alinmasi Redux-da
Bu dersde biz store-dan melumatlari React komponentinde gostereceyik.
Mehsullar ile olan proqramimizi aciq,
parts/products qovluguna daxil olaq
ve onun icinde ProductsList.jsx faylini yaradaq.
Evvelce ona store-dan melumat almaq ucun
istifade edeceyimiz useSelector hook-unu
import edek:
import { useSelector } from 'react-redux'
Indi ise store-dan mehsullari alaq.
Funksiya-selektori ayrica yaratmayacagiq,
onun kodunu birbasa useSelector ucun
parametrde yazacagiq:
export const ProductsList = () => {
const products = useSelector((state) => state.products)
}
Sonra mehsullari ProductsList funksiyasinin
body hissesinde, mehsullarin alindigi setirden
sonra standart usulla, map istifade ederek
gostereceyik:
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>
))
Ve asagida dispProducts-u asagidaki
verstkada gostereceyik:
return (
<div>
<h2>Products</h2>
{dispProducts}
</div>
)
Indi bizim mehsul siyahimizi ana sehifede
gostermek qalir. root.jsx faylini aciq
ve basligi deyisek:
<h2>This is my first Redux app!</h2>
Asagidakina:
<h2>My Products App</h2>
Sonra fayla ProductsList komponentini
import edek:
import { ProductsList } from '../parts/products/ProductsList'
Ve onu main-page id-li div-e hr
teqinden hemen sonra yerlestirek:
<ProductsList />
Proqramimizi ise salaq. Iki mehsuldan ibaret siyahimiz ana sehifede ugurla gosterildi.
Telebe ler ile olan proqraminizi acin.
students qovlugunda StudentsList.jsx
faylini yaradin.
Dersde izah edildiyi kimi useSelector
hook-u ile store-dan telebeleri alin.
map-den istifade ederek state-deki
telebe ler haqqinda olan butun melumat
sahelerini gosterin.
Alinan StudentsList komponentini
root.jsx-ye import edin ve onu ana
sehifede gosterin. Emin olun ki, telebeler
haqqinda butun melumat ekranda gosterildi.