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.