Redux: ミドルウェアで発生する無限再帰

作成日 2016年04月01日  ·  3コメント  ·  ソース: reduxjs/redux

React withReduxを利用しているウェブアプリに取り組んでいます。 私はredux-thunkGithubに同様のメッセージを投稿しましたが、これはおそらくReduxミドルウェアのより一般的な問題である可能性があると思います。 私は現在、ここにある例と非常によく似た方法でRedux-Thunkを使用しています。
http://redux.js.org/docs/advanced/ExampleRedditAPI.html

アプリを実行すると、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

これが私のプロジェクトへのリンクです:
https://github.com/jbri7357/redux-sample-app

question

最も参考になるコメント

問題はここにあり

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

mapStateToProps同様に、 mapDispatchToProps小道具を含むオブジェクトを返すことになって

関数を指定すると、 connect()はその関数を呼び出して、インスタンス固有のmapDispatchToProps()を取得します(これはインスタンスごとのメモ化に役立ちます)。 ただし、これは問題とは関係ありません。

あなたの場合、 dispatch (関数)ではなく{dispatch} (オブジェクト)を返すつもりdispatch

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

それで問題は解決します。 ちなみに、これはmapDispatchToProps指定しない場合のデフォルトの動作であるため、完全に削除してconnect()にまったく渡さない方がよいでしょう。

これがお役に立てば幸いです。

全てのコメント3件

それらの使用レベルを考えると、ReduxまたはRedux Thunkのいずれかで問題が発生する可能性は非常に低く、アプリのコードの微妙な間違いである可能性がはるかに高いと言えます。

ソースだけから診断するのは難しいです。 問題を再現するプロジェクトを公開できれば、それは役に立ちます。

問題はここにあり

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

mapStateToProps同様に、 mapDispatchToProps小道具を含むオブジェクトを返すことになって

関数を指定すると、 connect()はその関数を呼び出して、インスタンス固有のmapDispatchToProps()を取得します(これはインスタンスごとのメモ化に役立ちます)。 ただし、これは問題とは関係ありません。

あなたの場合、 dispatch (関数)ではなく{dispatch} (オブジェクト)を返すつもりdispatch

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

それで問題は解決します。 ちなみに、これはmapDispatchToProps指定しない場合のデフォルトの動作であるため、完全に削除してconnect()にまったく渡さない方がよいでしょう。

これがお役に立てば幸いです。

これとあなたが提供した徹底的な説明であなたの助けを本当にありがとう!

このページは役に立ちましたか?
0 / 5 - 0 評価