⊗jsrxPmWFRSD 14 of 57 menu

Bileşende Redux store'dan veri alma

Bu derste, store'daki verileri React bileşeninde göstereceğiz.

Ürün uygulamamızı açalım, parts/products klasörüne girelim ve içinde ProductsList.jsx dosyasını oluşturalım. Öncelikle içine store'dan veri almak için kullanacağımız useSelector kancasını içe aktaralım:

import { useSelector } from 'react-redux'

Şimdi store'dan ürünleri alalım. Seçici fonksiyonu ayrıca oluşturmayacağız, kodunu doğrudan useSelector parametresinde yazacağız:

export const ProductsList = () => { const products = useSelector((state) => state.products) }

Ardından ürünleri, ProductsList fonksiyonunun gövdesinde, ürünleri aldığımız satırdan sonra standart bir şekilde, map kullanarak göstereceğiz:

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> ))

Aşağıda ise dispProducts'u aşağıdaki işaretleme içinde göstereceğiz:

return ( <div> <h2>Products</h2> {dispProducts} </div> )

Şimdi geriye kalan, ürün listemizi ana sayfada göstermek. root.jsx dosyasını açalım ve başlığı düzeltelim:

<h2>This is my first Redux app!</h2>

Şu şekilde:

<h2>My Products App</h2>

Sonra dosyaya ProductsList bileşenini içe aktaralım:

import { ProductsList } from '../parts/products/ProductsList'

Ve onu, hr kapanış etiketinden hemen sonra, main-page kimliğine sahip div'in içine yerleştirelim:

<ProductsList />

Uygulamamızı başlatalım. İki ürünlük listemiz ana sayfada başarıyla gösterildi.

Öğrenci uygulamanızı açın. students klasöründe StudentsList.jsx dosyasını oluşturun.

useSelector kancasını kullanarak store'dan öğrencileri alın, derste anlatıldığı gibi. Durumdaki (state) öğrencilerle ilgili tüm bilgi alanlarını map kullanarak gösterin.

Oluşturduğunuz StudentsList bileşenini root.jsx dosyasına içe aktarın ve ana sayfada gösterin. Öğrencilerle ilgili tüm bilgilerin ekranda gösterildiğinden emin olun.

Türkçe
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenЎзбекOʻzbekTiếng Việt
Web sitesinin çalışması, analiz ve kişiselleştirme için çerezleri kullanıyoruz. Veri işleme, Gizlilik Politikası'na uygun olarak gerçekleşir.
tümünü kabul et özelleştir reddet