⊗jsrxPmWFRSD 14 of 57 menu

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.

Azərbaycan
AfrikaansБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
Biz saytin işi, analitika və fərdiləşdirmə üçün cookie istifadə edirik. Məlumatların emalı Məxfilik Siyasəti əsasında həyata keçirilir.
hamısını qəbul et konfiqurasiya et rədd et