Yo estaba tratando de crear algunos de los componentes en el mismo archivo jsx. Me quiere conectar uno de los componente secundario para almacenar(se siente mal aquí), sin necesidad de conectar el HOC componente a la tienda.
Por lo tanto, cuando se conecta el componente hijo que él no utiliza de exportación predeterminada conectar. Crea un error diciendo acciones son indefinidos.

Código de ejemplo.

class Test1 extends React.Component {
   constructor(props) {
   ****
   } 
   render(){
   ****
   }
}
function mapActionsToProps(dispatch) {
   return {
       actions: {
          testAction: bindActionCreators(testActionFromActions, dispatch)
       }
   }
connect(mapStateToProps,mapActionsToProps) (Test1);

class Test2 extends React.Component {
   constructor(props){
   ***
   }
   render(){
      return (<Test1/>);
   }
}

export default Test2;

Mi pregunta es ¿por qué siempre tenemos que utilizar conectar como de exportación predeterminada conectar ?. Hay otras maneras para hacer el connect?.

Gracias de antemano.

  • connect como el nombre suena conecta los componentes con su Redux de la tienda. No se puede conectar/interactuar con su componente sin el método de conexión de la redux. Espero que esto ayude.
  • Gracias. Adeel Imran. Sí, así es.
  • Conecte no siempre tiene que ser una exportación predeterminada conectar. Puede utilizar un nombre de exportación también.

2 Comentarios

  1. 25

    connect() devuelve un nuevo componente conectado.
    De hecho, conectar() se ajusta el componente en una nueva, la adición de algunas características útiles, es por eso que usted generalmente a la exportación, el valor de retorno de la función de conectar (el nuevo componente).

    En su caso, usted debe hacer algo como

    class Test1 extends React.Component {
       constructor(props) {
       ****
       } 
       render(){
       ****
       }
    }
    function mapActionsToProps(dispatch) {
       return {
           actions: {
              testAction: bindActionCreators(testActionFromActions, dispatch)
           }
       }
    const ConnectedTest1 = connect(mapStateToProps,mapActionsToProps) (Test1);
    
    class Test2 extends React.Component {
       constructor(props){
       ***
       }
       render(){
          return (<ConnectedTest1/>);
       }
    }
    
    export default Test2;
    • Gracias Brendan imaginé. Gracias de nuevo.
    • En otras palabras, que permitirá que el componente tiene los accesorios y la acción. Mapeo de ellos
    • const ConnectedTest1 debe incluir mapDispatchToProps no mapActionsToProps si no me equivoco 🙂
  2. 6

    Con un poco de más investigación he encontrado una cura :D.

    conectar siempre devuelve una función. En mi ejemplo yo de entrada Test1 como un argumento a la función de conectar.

    Así que tenemos que asignar la función devuelto a algunos variable o const. En el ejemplo anterior, la línea de conectar(mapStateToProps,mapActionsToProps) (Test1); debe cambiar a const ConnectedComponent = conectar(mapStateToProps,mapActionsToProps) (Test1);. Después de eso, puedo exportar el componente(ConnectedComponent) o la reutilización dentro del mismo archivo.

    este enlace que me ayude a entender esto.

    Espero que esta respuesta va a ayudar a los demás.

    • usted puede utilizar el código siguiente para la exportación. const ConnectedComponent = connect(mapStateToProps,mapActionsToProps) (Test1); export {ConnectedComponent as Test1}

Dejar respuesta

Please enter your comment!
Please enter your name here