Saltar al contenido

Cómo conectar Redux a un componente de nieto

123456789101112131415importReactfrom "react";import{ connect }from "react-redux";constGrandChild=props=>(<divclassName="grandchild-component"³;div {props.count}</div></div;);constmapStateToProps=state===;({ count: state.count});exportdefaultconnect(mapStateToProps)(GrandChild);

jsx

¿Qué es esta función de conexión de aspecto extraño que vemos arriba?

Cómo conectar Redux a un componente de nieto
Cómo conectar Redux a un componente de nieto

connect() es una función de orden superior que conecta el componente con la tienda Redux. El almacén es donde vive el estado global de toda la aplicación.

La función connect() devuelve una función cuando la llamamos, y a la función devuelta le pasamos el componente React, que luego devuelve un componente conectado; por eso la llamada a la función connect se ve tan rara.

Luego exportamos el componente conectado con todos los accesorios necesarios.

La función mapStateToProps() es una función personalizada y no algo específico de Redux. Su propósito, como sugiere el nombre de la función, es devolver al componente sólo los datos necesarios del estado global como props.

Child.js

El va a ser un simple componente que sólo va a envolver el componente.

123456constChild=()=[;(&lt;divclassName="componente infantil"<<<<< Este es el componente infantil&lt;/div
jsx