Атрыманне даных з store у кампаненце ў Redux

На гэтым заняцці мы выведзем даныя з 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>Price: {product.price}</p>
    <p>Amount: {product.amount}</p>
  </div>
))

А ніжэй выведзем dispProducts у наступнай верстцы:

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

Цяпер засталося адлюстраваць наш спіс прадуктаў на галоўнай старонцы. Адчынём файл root.jsx і выправім загаловак:

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

На наступны:

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

Затым імпартуем у файл кампанент ProductsList:

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

І ўставім яго ў дыў з айды main-page адразу пасля зачыняльнага тэга hr:

app/root.jsx<ProductsList />

Запускаем наша прыкладанне. Наш спіс з двух прадуктаў паспяхова вывеўся на галоўнай старонцы.