Obtention des données du store dans un composant avec Redux
Lors de cette session, nous allons afficher les données du store dans un composant React.
Ouvrons notre application de produits, allons
dans le dossier parts/products et créons-y
le fichier ProductsList.jsx. Commençons par importer
le hook useSelector, avec lequel nous
récupérerons les données du store :
import { useSelector } from 'react-redux'
Maintenant, récupérons les produits du store.
Nous ne créerons pas la fonction de sélection (selector) séparément,
nous écrirons son code directement dans le paramètre pour
useSelector :
export const ProductsList = () => {
const products = useSelector((state) => state.products)
}
Ensuite, nous afficherons les produits de manière standard
dans le corps de la fonction ProductsList après
la ligne de récupération des produits, en utilisant
map :
const dispProducts = products.map((product) => (
<div key={product.id}>
<h3>{product.name}</h3>
<p>{product.desc.substring(0, 100)}</p>
<p>Prix : {product.price}</p>
<p>Quantité : {product.amount}</p>
</div>
))
Et ci-dessous, nous afficherons dispProducts dans le
balisage suivant :
return (
<div>
<h2>Produits</h2>
{dispProducts}
</div>
)
Il ne reste plus qu'à afficher notre liste
de produits sur la page principale. Ouvrons
le fichier root.jsx et modifions le titre :
<h2>This is my first Redux app!</h2>
Par :
<h2>My Products App</h2>
Ensuite, importons dans le fichier le composant
ProductsList :
import { ProductsList } from '../parts/products/ProductsList'
Et insérons-le dans le div avec l'id main-page
juste après la balise fermante hr :
<ProductsList />
Lançons notre application. Notre liste de deux produits s'est bien affichée sur la page principale.
Ouvrez votre application d'étudiants.
Créez le fichier StudentsList.jsx dans le dossier
students.
Récupérez les étudiants du store à l'aide
du hook useSelector, comme décrit dans la leçon.
Affichez tous les champs d'information sur les
étudiants provenant de l'état (state), en utilisant
map.
Importez le composant obtenu
StudentsList dans root.jsx et
affichez-le sur la page principale. Assurez-vous
que toutes les informations sur les étudiants
sont affichées à l'écran.