Извличане на данни от 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'

И ще го поставим в div с id main-page веднага след затварящия таг hr:

app/root.jsx<ProductsList />

Стартираме нашето приложение. Нашият списък от два продукта беше успешно изведен на главната страница.