⊗jsrxPmWFRSD 14 of 57 menu

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ë StudentsListroot.jsx dhe shfaqeni atë në faqen kryesore. Sigurohuni që e gjithë informacioni për studentët u shfaq në ekran.

Shqip
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
Ne përdorim cookie për funksionimin e sajtit, analizën dhe personalizimin. Përpunimi i të dhënave bëhet në përputhje me Politikën e Privatësisë.
prano të gjitha konfiguro refuzo