⊗jsrxPmWFRSD 14 of 57 menu

მონაცემების მიღება 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-ში და გამოაჩინეთ ის მთავარ გვერდზე. დარწმუნდით, რომ სტუდენტების შესახებ ყველა ინფორმაცია გამოჩნდა ეკრანზე.

ქართული
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語Қазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
ვებსაიტის მუშაობის, ანალიტიკისა და პერსონალიზაციისთვის ვიყენებთ ქუქი-ფაილებს. მონაცემთა დამუშავება ხდება Კონფიდენციალურობის პოლიტიკის შესაბამისად.
ყველას მიღება პარამეტრები უარყოფა