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:

parts/products/ProductsList.jsximport { 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:

parts/products/ProductsList.jsxexport 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:

parts/products/ProductsList.jsxconst 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:

parts/products/ProductsList.jsxreturn (
  <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:

app/root.jsx<h2>This is my first Redux app!</h2>

Şu şekilde:

app/root.jsx<h2>My Products App</h2>

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

app/root.jsximport { ProductsList } from '../parts/products/ProductsList'

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

app/root.jsx<ProductsList />

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