Redux'то компонентте store'дон маалымат алуу

Бул сабакта биз маалыматтарды store'дон React компонентине чыгарабыз.

Продукциялардын колдонмосунун ачып, parts/products папкасына кирип, анда ProductsList.jsx файлын түзөбүз. Башында андан useSelector хукун импорттоп алабыз, анын жардамы менен store'дон маалымат алабыз:

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

Эми store'дон продукцияларды алалы. Функция-селекторду бөлөк түзбөйбүз, анын кодун түз эле 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>Баасы: {product.price}</p>
    <p>Саны: {product.amount}</p>
  </div>
))

Жана төмөн dispProducts төмөнкү версткада чыгарабыз:

parts/products/ProductsList.jsxreturn (
  <div>
    <h2>Продукциялар</h2>
    {dispProducts}
  </div>
)

Эми биздин продукциялардын тизмесин башкы баракчада көрсөтүү калды. Файлды ачабыз root.jsx жана аталышын оңдойбуз:

app/root.jsx<h2>Бул менин биринчи Redux колдонмом!</h2>

Төмөнкүгө:

app/root.jsx<h2>Менин Продукциялар Колдонмом</h2>

Андан кийин файлга компонентти импорттообуз ProductsList:

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

Жана аны дивге киргизебиз, айдиси менен main-page жабуучу тегден кийин түз эле hr:

app/root.jsx<ProductsList />

Колдонмомузду иштетебиз. Биздин эки продукциянын тизмеси башкы баракчада ийгиликтүү чыкты.