Andmete hankimine store'ist komponendis Reduxis

Sellel tunnil kuvame andmed store'ist React komponendis.

Avame oma tooterakenduse, läheme kausta parts/products ja loome sinna faili ProductsList.jsx. Alustuseks impordime sinna hooki useSelector, mille abil hankime andmed store'ist:

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

Nüüd hankime tooted store'ist. Funktsiooni-selektorit me ei loo eraldi, kirjutame selle koodi kohe parameetris useSelector jaoks:

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

Seejärel kuvame tooted standardsel viisil funktsiooni ProductsList kehas pärast tooteid hankivat rida, kasutades 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>Hind: {product.price}</p>
    <p>Kogus: {product.amount}</p>
  </div>
))

Ja allpool kuvame dispProducts järgmises visandis:

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

Nüüd jääb üle kuvada meie toodete nimekiri pealehel. Avame faili root.jsx ja muudame pealkirja:

app/root.jsx<h2>See on minu esimene Redux rakendus!</h2>

Järgmiseks:

app/root.jsx<h2>Minu Tooted Rakendus</h2>

Seejärel impordime faili komponendi ProductsList:

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

Ja sisestame selle div-i id-ga main-page kohe pärast sulgevat tag-i hr:

app/root.jsx<ProductsList />

Käivitame oma rakenduse. Meie nimekiri kahest tootest kuvati pealehel edukalt.