Ανάκτηση δεδομένων από το 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 και
εμφανίστε το στην κύρια σελίδα. Βεβαιωθείτε
ότι όλες οι πληροφορίες σχετικά με τους μαθητές
εμφανίζονται στην οθόνη.