მონაცემების მიღება store-დან კომპონენტში Redux-ში

ამ საკვანძო გაკვეთილზე ჩვენ გამოვიტანთ მონაცემებს store-დან React კომპონენტში.

გავხსნათ ჩვენი პროდუქტების აპლიკაცია, შევიდეთ ფოლდერში parts/products და შევქმნათ მასში ფაილი ProductsList.jsx. დასაწყისისთვის იმპორტი გავაკეთოთ მასში hook 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-ში აიდით main-page დახურვის hr ტეგის შემდეგ:

app/root.jsx<ProductsList />

ვჩართოთ ჩვენი აპლიკაცია. ჩვენი სია ორი პროდუქტით წარმატებით გამოჩნდა მთავარ გვერდზე.