⊗jsrxPmWFRSD 14 of 57 menu

Obtención de datos del store en un componente en Redux

En esta sesión mostraremos los datos desde el store en un componente de React.

Abrimos nuestra aplicación de productos, entramos en la carpeta parts/products y creamos en ella el archivo ProductsList.jsx. Para empezar importamos en él el hook useSelector, con cuya ayuda obtendremos los datos del store:

import { useSelector } from 'react-redux'

Ahora obtengamos los productos del store. No crearemos la función selector por separado, escribiremos su código directamente en el parámetro para useSelector:

export const ProductsList = () => { const products = useSelector((state) => state.products) }

Luego mostraremos los productos de la manera estándar en el cuerpo de la función ProductsList después de la línea de obtención de productos, usando map:

const dispProducts = products.map((product) => ( <div key={product.id}> <h3>{product.name}</h3> <p>{product.desc.substring(0, 100)}</p> <p>Precio: {product.price}</p> <p>Cantidad: {product.amount}</p> </div> ))

Y más abajo mostraremos dispProducts en el siguiente código:

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

Ahora solo queda mostrar nuestra lista de productos en la página principal. Abramos el archivo root.jsx y corrijamos el título:

<h2>¡Esta es mi primera aplicación Redux!</h2>

Por el siguiente:

<h2>Mi App de Productos</h2>

Luego importamos en el archivo el componente ProductsList:

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

Y lo insertamos en el div con id main-page inmediatamente después de la etiqueta de cierre hr:

<ProductsList />

Ejecutamos nuestra aplicación. Nuestra lista de dos productos se mostró exitosamente en la página principal.

Abra su aplicación de estudiantes. Cree el archivo StudentsList.jsx en la carpeta students.

Obtenga los estudiantes del store usando el hook useSelector, como se describe en la lección. Muestre todos los campos con información sobre los estudiantes del estado, utilizando map.

Importe el componente obtenido StudentsList en root.jsx y muéstrelo en la página principal. Asegúrese de que toda la información sobre los estudiantes se muestre en pantalla.

Español
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
Usamos cookies para el funcionamiento del sitio, análisis y personalización. El procesamiento de datos se realiza de acuerdo con la Política de privacidad.
aceptar todas configurar rechazar