Soy un principiante de React, intento convertir la clase en ganchos, necesito un consejo/ayuda sobre cómo eliminar de forma segura 'mapStateToProps' sin quedar indefinido.
tengo la página A.js y la página B.js.
Componente B.js He publicado el código completo aquí, por lo que es fácil de entender. Por el momento, el registro de la consola me dará una serie de objetos.
Si elimino 'mapStateToProps' y configuro connect(null, null)(ConnectedList)
entonces el registro de la consola me dará 'indefinido'.
Este es mi A.js donde estoy usando el componente B.js:
<React.Fragment> <h3> <Trans i18nKey="home.brokers">Brokers</Trans> </h3> <B action="brokers" actionArgs={site.identifier} /> <h3> <Trans i18nKey="home.cameras">Cameras</Trans> </h3> <B action="cameras" actionArgs={site.identifier} /> </React.Fragment>este es mi B.js que quiero convertir y deshacerme de 'mapStateToProps'
import React, { Component, useEffect, useState } from "react"; import { connect, useDispatch } from "react-redux"; const mapStateToProps = (state) => ({ sites: state.articles.sites, analysers: state.siteArticles.analysers, brokers: state.siteArticles.brokers, cameras: state.siteArticles.cameras, platforms: state.siteArticles.platforms, }); function ConnectedList(props) { console.log("data", props[props.action]); return <div></div>; } const B= connect(mapStateToProps, null)(ConnectedList); export default B;Le sugiero que use el gancho useSelector de react-redux para resolver este problema.
Como puede definir cualquier lógica en su devolución de llamada en useSelector, puede extraer fácilmente la parte del estado que necesita de props.action. Si lo desea, puede incluso elevar esta lógica a una función de selector separada y luego agregarla a su parámetro useSelector.
export default function ConnectedList(props) { const data = useSelector((state) => { const articles = { sites: state.articles.sites, analysers: state.siteArticles.analysers, brokers: state.siteArticles.brokers, cameras: state.siteArticles.cameras, platforms: state.siteArticles.platforms, }; return articles[props.action]; }); return <div></div>; }Conectamos un Componente al Redux cuando queremos leer o cambiar un valor.
De lo contrario, no hay necesidad de Redux.
solo sáltatelo
export default Component