Me refiero a esta parte del tutorial oficial de React (Convención: Maximización de la compatibilidad) :
// connect is a function that returns another function const enhance = connect(commentListSelector, commentListActions); // The returned function is a HOC, which returns a component that is connected // to the Redux store const ConnectedComment = enhance(CommentList);¿Cómo deberíamos implementar la función connect()?
Conceptualmente, HOC connect es algo como esto:
function connect(mapStateToProps, mapDispatchToProps) { return function (WrappedComponent) { return class extends React.Component { render() { return ( <WrappedComponent {...this.props} /> ) } } } }Como puedes ver, es una función que devuelve otra función.
En la primera llamada conectar obtener 2 argumentos
const enhance = connect(commentListSelector, commentListActions);En el segundo, obtiene el Componente que devolvemos en la función de conexión.
const ConnectedComment = enhance(CommentList);Pero no solo el componente, volvemos a conectarnos con nuevos accesorios que obtenemos de redux, por lo que se trata de cómo obtener datos de redux, mire un ejemplo más detallado (si no es suficiente para usted, puede consultar el enlace en un comentario anterior):
function connect(mapStateToProps, mapDispatchToProps) { return function (WrappedComponent) { return class extends React.Component { render() { return ( <WrappedComponent {...this.props} {...mapStateToProps(store.getState(), this.props)} {...mapDispatchToProps(store.dispatch, this.props)} /> ) } } } }Para mí, más útil y conveniente es el patrón de gancho de reacción, verifique los métodos useSelector y useDispatch para obtener datos del componente redux para reaccionar. Es más simple, conecta un enfoque heredado y puede ser útil solo con componentes de clase.