მონაცემების მიღება store-დან კომპონენტში Redux-ში
ამ საკვანძო გაკვეთილზე ჩვენ გამოვიტანთ მონაცემებს store-დან React კომპონენტში.
გავხსნათ ჩვენი პროდუქტების აპლიკაცია, შევიდეთ
ფოლდერში parts/products და შევქმნათ მასში
ფაილი ProductsList.jsx. დასაწყისისთვის იმპორტი გავაკეთოთ
მასში hook useSelector, რისი დახმარებითაც
მივიღებთ მონაცემებს store-დან:
import { useSelector } from 'react-redux'
ახლა მოდით მივიღოთ პროდუქტები store-დან.
ფუნქცია-სელექტორი ცალკე არ შევქმნათ,
მის კოდს პირდაპირ პარამეტრში ჩავწერთ
useSelector-ისთვის:
export const ProductsList = () => {
const products = useSelector((state) => state.products)
}
შემდეგ ჩვენ გამოვიტანთ პროდუქტებს სტანდარტული გზით
ფუნქციის ProductsList სხეულში
პროდუქტების მიღების შემდეგ, გამოყენებით
map-ის:
const 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 შემდეგ
ვერსტკაში:
return (
<div>
<h2>Products</h2>
{dispProducts}
</div>
)
ახლა დარჩა ჩვენი სიის გამოტანა
პროდუქტების მთავარ გვერდზე. გავხსნათ
ფაილი root.jsx და შევასწოროთ სათაური:
<h2>This is my first Redux app!</h2>
შემდეგზე:
<h2>My Products App</h2>
შემდეგ იმპორტი გავაკეთოთ ფაილში კომპონენტი
ProductsList:
import { ProductsList } from '../parts/products/ProductsList'
და ჩავსვათ ის div-ში აიდით main-page
დახურვის hr ტეგის შემდეგ:
<ProductsList />
ვჩართოთ ჩვენი აპლიკაცია. ჩვენი სია ორი პროდუქტით წარმატებით გამოჩნდა მთავარ გვერდზე.
გახსენით თქვენი აპლიკაცია სტუდენტებთან.
შექმენით ფაილი StudentsList.jsx ფოლდერში
students.
მიიღეთ სტუდენტები store-დან გამოყენებით
hook useSelector, როგორც ეს აღწერილია გაკვეთილზე.
გამოაჩინეთ ყველა ველი სტუდენტის ინფორმაციით
სტეიტიდან, გამოყენებით
map.
იმპორტი გაუკეთეთ მიღებულ კომპონენტს
StudentsList root.jsx-ში და
გამოაჩინეთ ის მთავარ გვერდზე. დარწმუნდით,
რომ სტუდენტების შესახებ ყველა ინფორმაცია
გამოჩნდა ეკრანზე.