Datu iegūšana no store komponentē Redux

Šajā nodarbībā mēs attēlosim datus no store React komponentē.

Atvērsim mūsu lietotni ar produktiem, iesim mapē parts/products un izveidosim tajā failu ProductsList.jsx. Sākumā importēsim tajā hook useSelector, ar kura palīdzību iegūsim datus no store:

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

Tagad iegūsim produktus no store. Funkciju-selector mēs neveidosim atsevišķi, ierakstīsim tās kodu tieši parametrā priekš useSelector:

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

Pēc tam mēs attēlosim produktus standarta veidā funkcijas ProductsList ķermenī pēc rindiņas ar produktu iegūšanu, izmantojot 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>
))

Un zemāk attēlosim dispProducts sekojošā izmantotnē:

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

Tagad atliek attēlot mūsu produktu sarakstu galvenajā lapā. Atvērsim failu root.jsx un labosim virsrakstu:

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

Uz sekojošo:

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

Pēc tam importēsim failā komponentu ProductsList:

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

Un ievietosim to div ar id main-page tūlīt pēc aizverošā taga hr:

app/root.jsx<ProductsList />

Palaizam mūsu lietotni. Mūsu saraksts no diviem produktiem veiksmīgi tika attēlots galvenajā lapā.