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.