⊗jsrxPmWFRSD 14 of 57 menu

Ανάκτηση δεδομένων από το store σε ένα component στο Redux

Σε αυτό το μάθημα θα εμφανίσουμε δεδομένα από το store σε ένα React component.

Ας ανοίξουμε την εφαρμογή μας με τα προϊόντα, ας μπούμε στον φάκελο parts/products και ας δημιουργήσουμε σε αυτόν το αρχείο ProductsList.jsx. Αρχικά, ας εισάγουμε σε αυτό το hook useSelector, με το οποίο θα ανακτούμε δεδομένα από το store:

import { useSelector } from 'react-redux'

Τώρα ας ανακτήσουμε τα προϊόντα από το store. Δεν θα δημιουργήσουμε τη συνάρτηση-selector ξεχωριστά, θα γράψουμε τον κώδικά της απευθείας στην παράμετρο για το 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 στην ακόλουθη markup:

return ( <div> <h2>Products</h2> {dispProducts} </div> )

Τώρα μένει να εμφανίσουμε τη λίστα μας προϊόντων στην κύρια σελίδα. Ας ανοίξουμε το αρχείο root.jsx και ας διορθώσουμε τον τίτλο:

<h2>This is my first Redux app!</h2>

Στο επόμενο:

<h2>My Products App</h2>

Στη συνέχεια, εισάγουμε στο αρχείο το component ProductsList:

import { ProductsList } from '../parts/products/ProductsList'

Και θα το εισάγουμε στο div με id main-page αμέσως μετά το κλείσιμο της ετικέτας hr:

<ProductsList />

Εκκινούμε την εφαρμογή μας. Η λίστα μας από δύο προϊόντα εμφανίστηκε με επιτυχία στην κύρια σελίδα.

Ανοίξτε την εφαρμογή σας με τους μαθητές. Δημιουργήστε το αρχείο StudentsList.jsx στο φάκελο students.

Ανακτήστε τους μαθητές από το store χρησιμοποιώντας το hook useSelector, όπως περιγράφεται στο μάθημα. Εμφανίστε όλα τα πεδία με πληροφορίες σχετικά με τους μαθητές από το state, χρησιμοποιώντας το map.

Εισάγετε το component που λήφθηκε StudentsList στο root.jsx και εμφανίστε το στην κύρια σελίδα. Βεβαιωθείτε ότι όλες οι πληροφορίες σχετικά με τους μαθητές εμφανίζονται στην οθόνη.

Ελληνικά
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
Χρησιμοποιούμε cookie για τη λειτουργία του ιστότοπου, την ανάλυση και την εξατομίκευση. Η επεξεργασία των δεδομένων γίνεται σύμφωνα με την Πολιτική Απορρήτου.
αποδοχή όλων ρύθμιση απόρριψη