web-dev-qa-db-fra.com

Quelle est la nécessité d '"exporter la connexion par défaut" lorsque vous connectez votre composant React au magasin Redux

J'essayais de créer certains composants dans le même fichier jsx. Je souhaite connecter l'un des composants enfants au magasin (cela ne va pas ici), sans connecter le composant HOC au magasin. Par conséquent, lors de la connexion du composant enfant, il n'utilise pas exportation de la connexion par défaut. Cela crée une erreur disant que actions ne sont pas définis.

Exemple de code.

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;

Ma question est pourquoi nous devons toujours utiliser connect as exporter la connexion par défaut?. Y a-t-il d'autres façons de faire la connexion?.

Merci d'avance.

reactjsreduxreact-redux
12
Shashith Darshana

connect () renvoie un nouveau composant connecté. En fait, connect () encapsule votre composant dans un nouveau, ajoutant quelques fonctionnalités utiles, c'est pourquoi vous exportez généralement la valeur de retour de la fonction connect (le nouveau composant).

Dans votre cas, vous devriez faire quelque chose comme

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;
22
Brendan Rius

Avec un peu plus de recherches, j'ai trouvé un remède: D.

connect renvoie toujours une fonction. Dans mon exemple, j'entre Test1 comme argument de la fonction connect.

Nous devons donc affecter la fonction retournée à une variable ou const . Dans l'exemple ci-dessus, la ligne connect (mapStateToProps, mapActionsToProps) (Test1); doit changer en const ConnectedComponent = connect (mapStateToProps, mapActionsToProps) (Test1); . Après cela, je peux exporter le composant (ConnectedComponent) ou le réutiliser dans le même fichier.

this link m'aide à comprendre cela.

J'espère que cette réponse aidera les autres.

4
Shashith Darshana