Duomenų gavimas iš store komponente Redux

Šioje pamokoje mes atvaizduosime duomenis iš store React komponente.

Atidarykime mūsų produktų aplikaciją, eikime į aplanką parts/products ir jame sukurkime failą ProductsList.jsx. Pirmiausia importuokime jame hook'ą useSelector, kurio pagalba gausime duomenis iš store:

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

Dabar gaukime produktus iš store. Funkciją-selektoriumi mes nesukursime atskirai, įrašysime jos kodą iškart parametre for useSelector:

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

Tada mes atvaizduosime produktus standartiniu būdu funkcijos ProductsList kūne po eilutės su produktų gavimu, naudodami 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>
))

O žemiau atvaizduokime dispProducts sekančioje struktūroje:

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

Dabar belieka atvaizduoti mūsų produktų sąrašą pagrindiniame puslapyje. Atidarykime failą root.jsx ir pakeiskime antraštę:

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

Į sekantį:

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

Tada importuokime į failą komponentą ProductsList:

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

Ir įstatykime jį į div su id main-page iškart po uždaromojo tag'o hr:

app/root.jsx<ProductsList />

Paleiskime mūsų aplikaciją. Mūsų sąrašas iš dviejų produktų sėkmingai atvaizdavosi pagrindiniame puslapyje.