Redux: Infinite recursion occurring with middleware

Created on 1 Apr 2016 · 3Comments · Source: reduxjs/redux

I'm working on a webapp that's utilizing React with Redux. I have posted a similar message at the redux-thunk Github, but I think this might possibly be a more general issue with Redux middleware. I am currently using Redux-Thunk in a manner very similar to the example found here:
http://redux.js.org/docs/advanced/ExampleRedditAPI.html

When running my app, I see the following error in 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

Here's a link to my project:
https://github.com/jbri7357/redux-sample-app

question

Source

jbri7357

Most helpful comment

The issue is here:

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

Just like mapStateToProps, mapDispatchToProps is supposed to return an object with props.

If you supply a function, connect() will call that function to obtain an instance-specific mapDispatchToProps() (this is useful for per-instance memoization). This is not relevant to your problem though.

In your case, you meant to return {dispatch} (an object) instead of dispatch (a function):

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

That will fix the problem. By the way, this _is_ the default behavior if you don’t specify mapDispatchToProps, so you might as well delete it completely and not pass it to connect() at all.

I hope this helps!

gaearon on 1 Apr 2016

👍4

All 3 comments

I would say that given their level of usage, it is very unlikely to be an issue with either Redux or Redux Thunk, and much more likely to be a subtle mistake in the app’s code.

It’s hard to diagnose from the source alone. If you could publish a project reproducing the issue, that would be helpful.

gaearon on 1 Apr 2016

The issue is here:

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

Just like mapStateToProps, mapDispatchToProps is supposed to return an object with props.

In your case, you meant to return {dispatch} (an object) instead of dispatch (a function):

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

That will fix the problem. By the way, this _is_ the default behavior if you don’t specify mapDispatchToProps, so you might as well delete it completely and not pass it to connect() at all.

I hope this helps!

gaearon on 1 Apr 2016

👍4

Thank you so much for your help with this and the thorough explanation you provided!

jbri7357 on 1 Apr 2016

Was this page helpful?

0 / 5 - 0 ratings