⊗jsrxPmWFRSD 14 of 57 menu

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.

Français
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
Nous utilisons des cookies pour le fonctionnement du site, l'analyse et la personnalisation. Le traitement des données est effectué conformément à la Politique de confidentialité.
accepter tout personnaliser refuser