Infinite recursion occurring with middleware

[jbri7357]

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

[gaearon]

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]

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!

[jbri7357]

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