Komponentda Redux store'dan ma'lumot olish

Ushbu mashg'ulotda biz store'dan ma'lumotlarni React komponentida chiqaramiz.

Mahsulotlar bilan ilovamizni ochamiz, parts/products papkasiga kiramiz va uning ichida ProductsList.jsx faylini yaratamiz. Boshlanish uchun unga useSelector hookini import qilamiz, uning yordamida biz store'dan ma'lumot olamiz:

parts/products/ProductsList.jsximport { useSelector } from 'react-redux'

Endi store'dan mahsulotlarni olamiz. Funksiya-selektorni alohida yaratmaymiz, uning kodini useSelector parametrida yoza olaylik:

parts/products/ProductsList.jsxexport const ProductsList = () => {
  const products = useSelector((state) => state.products)
}

Keyin biz mahsulotlarni ProductsList funksiyasi tana qismida mahsulotlarni olish qatoridan keyin standart usulda chiqaramiz, map dan foydalangan holda:

parts/products/ProductsList.jsxconst dispProducts = products.map((product) => (
  <div key={product.id}>
    <h3>{product.name}</h3>
    <p>{product.desc.substring(0, 100)}</p>
    <p>Narx: {product.price}</p>
    <p>Miqdor: {product.amount}</p>
  </div>
))

Va pastda dispProducts ni quyidagi verstkada chiqaramiz:

parts/products/ProductsList.jsxreturn (
  <div>
    <h2>Mahsulotlar</h2>
    {dispProducts}
  </div>
)

Endi bizning mahsulotlar ro'yxatimizni asosiy sahifada ko'rsatish qoldi. root.jsx faylini ochamiz va sarlavhani o'zgartiramiz:

app/root.jsx<h2>Bu mening birinchi Redux ilovam!</h2>

Quyidagiga:

app/root.jsx<h2>Mening Mahsulotlar Ilovam</h2>

Keyin faylga ProductsList komponentini import qilamiz:

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

Va uni main-page id'li divga hr yopilgan teggidan keyin darhol joylaymiz:

app/root.jsx<ProductsList />

Ilovamizni ishga tushiramiz. Bizning ikkita mahsulotdan iborat ro'yxatimiz asosiy sahifada muvaffaqiyatli chiqdi.