Преузимање података из 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>Производи</h2>
    {dispProducts}
  </div>
)

Сада нам је остало само да прикажемо наш списак производа на главној страници. Отворимо фајл root.jsx и исправимо наслов:

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

На следећи:

app/root.jsx<h2>Мoја апликација са производима</h2>

Затим увезимо у фајл компоненту ProductsList:

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

И убацимо је у див са ид-ем main-page одмах после затварајућег тага hr:

app/root.jsx<ProductsList />

Покренимо нашу апликацију. Наш списак од два производа је успешно приказан на главној страници.