Redux: Récursivité infinie se produisant avec le middleware

Créé le 1 avr. 2016  ·  3Commentaires  ·  Source: reduxjs/redux

Je travaille sur une webapp qui utilise React avec Redux. J'ai publié un message similaire sur le redux-thunk Github, mais je pense que cela pourrait être un problème plus général avec le middleware Redux. J'utilise actuellement Redux-Thunk d'une manière très similaire à l'exemple trouvé ici:
http://redux.js.org/docs/advanced/ExampleRedditAPI.html

Lors de l'exécution de mon application, l'erreur suivante s'affiche dans Chrome:

Uncaught RangeError: Maximum call stack size exceeded
(anonymous function) @ index.js:10
dispatch @ applyMiddleware.js:44
(anonymous function) @ index.js:12
dispatch @ applyMiddleware.js:44
(anonymous function) @ index.js:12
dispatch @ applyMiddleware.js:44
(anonymous function) @ index.js:12
dispatch @ applyMiddleware.js:44

Voici un lien vers mon projet:
https://github.com/jbri7357/redux-sample-app

question
Source
picture jbri7357

Commentaire le plus utile

Le problème est ici :

const mapDispatchToProps = (dispatch) => {
  return dispatch;
}

Tout comme mapStateToProps , mapDispatchToProps est censé renvoyer un objet avec des accessoires .

Si vous fournissez une fonction, connect() appellera cette fonction pour obtenir un mapDispatchToProps() spécifique (ceci est utile pour la mémorisation par instance). Ceci n'est cependant pas pertinent pour votre problème.

Dans votre cas, vous vouliez retourner {dispatch} (un objet) au lieu de dispatch (une fonction):

const mapDispatchToProps = (dispatch) => {
  // return dispatch;
  return {dispatch};
}

Cela résoudra le problème. Au fait, c'est le comportement par défaut si vous ne spécifiez pas mapDispatchToProps , vous pouvez donc aussi bien le supprimer complètement et ne pas le passer du tout à connect() .

J'espère que ça aide!

picture gaearon le 1 avr. 2016
👍4

Tous les 3 commentaires

Je dirais que compte tenu de leur niveau d'utilisation, il est très peu probable que ce soit un problème avec Redux ou Redux Thunk, et beaucoup plus susceptible d'être une erreur subtile dans le code de l'application.

Il est difficile de diagnostiquer à partir de la seule source. Si vous pouviez publier un projet reproduisant le problème, ce serait utile.

gaearon picture gaearon le 1 avr. 2016

Le problème est ici :

const mapDispatchToProps = (dispatch) => {
  return dispatch;
}

Tout comme mapStateToProps , mapDispatchToProps est censé renvoyer un objet avec des accessoires .

Si vous fournissez une fonction, connect() appellera cette fonction pour obtenir un mapDispatchToProps() spécifique (ceci est utile pour la mémorisation par instance). Ceci n'est cependant pas pertinent pour votre problème.

Dans votre cas, vous vouliez retourner {dispatch} (un objet) au lieu de dispatch (une fonction):

const mapDispatchToProps = (dispatch) => {
  // return dispatch;
  return {dispatch};
}

Cela résoudra le problème. Au fait, c'est le comportement par défaut si vous ne spécifiez pas mapDispatchToProps , vous pouvez donc aussi bien le supprimer complètement et ne pas le passer du tout à connect() .

J'espère que ça aide!

gaearon picture gaearon le 1 avr. 2016
👍4

Merci beaucoup pour votre aide et les explications détaillées que vous avez fournies!

jbri7357 picture jbri7357 le 1 avr. 2016
Cette page vous a été utile?
0 / 5 - 0 notes

Questions connexes

benoneal picture benoneal  ·  3Commentaires
ilearnio picture ilearnio  ·  3Commentaires
vraa picture vraa  ·  3Commentaires
olalonde picture olalonde  ·  3Commentaires
elado picture elado  ·  3Commentaires