Storeдан маълумотларини компонентда олиш (Redux)

Ушбу машғулотда биз storeдан маълумотларни React компонентида чиқарамиз.

Махсулотлар билан ишлайдиган илованимизни очийлик, parts/products папкасига кириб, унинг ичида ProductsList.jsx файлини яратамиз. Бошлаш учун унга useSelector хукни импорт қиламиз, унги ёрдамида biz storedan маълумот оламиз:

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

Энди storedан махсулотларни олайлик. Селектор функциясини алохида яратмаймиз, унинг кодини тўғридан-тўғри useSelector учун параметр сифатида ёзамиз:

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

Сўнгра биз махсулотларни оддий усул билан ProductsList функциясининг бодида махсулотларни олиш сатридан кейин чиқарамиз, map дан фойдаланиб:

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

Ва пастга dispProducts ни куйидаги версткада чиқарамиз:

parts/products/ProductsList.jsxreturn (
  <div>
    <h2>Махсулотлар</h2>
    {dispProducts}
  </div>
)

Энди бизнинг махсулотлар рўйхатимизни бош саҳифада кўрсатиш қолди. Келик root.jsx файлини очиб, сарлавҳани ўзгартирамиз:

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

Куйидагига:

app/root.jsx<h2>Менинг Mahсулотлар Иловам</h2>

Сўнгра файлга ProductsList компонентини импорт қиламиз:

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

Ва уни main-page айдисига эга бўлган дивга hr ёпилувчи тегидан кейин жойлаштирамиз:

app/root.jsx<ProductsList />

Илованимизни ишга туширамиз. Бизнинг иккита махсулотдан иборат рўйхатимиз бош саҳифада муваффақиятли чиқди.