Redux: Бесконечная рекурсия, происходящая с промежуточным программным обеспечением

Созданный на 1 апр. 2016  ·  3Комментарии  ·  Источник: reduxjs/redux

Я работаю над веб-приложением, использующим React с Redux. Я разместил аналогичное сообщение на Github, но я думаю, что это может быть более общая проблема с промежуточным программным обеспечением 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 (функция):

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

Это решит проблему. Между прочим, это _является_ поведением по умолчанию, если вы не укажете mapDispatchToProps , так что вы можете полностью удалить его и вообще не передавать его connect() .

Надеюсь, это поможет!

Все 3 Комментарий

Я бы сказал, что, учитывая их уровень использования, очень маловероятно, что это будет проблемой с Redux или Redux Thunk, и гораздо более вероятно, что это будет тонкая ошибка в коде приложения.

Трудно поставить диагноз только по первоисточнику. Если бы вы могли опубликовать проект, воспроизводящий проблему, это было бы полезно.

Проблема здесь :

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

Как и mapStateToProps , mapDispatchToProps должен возвращать объект с реквизитами .

Если вы предоставляете функцию, connect() вызовет эту функцию, чтобы получить mapDispatchToProps() конкретного экземпляра (это полезно для мемоизации для каждого экземпляра). Однако это не имеет отношения к вашей проблеме.

В вашем случае вы хотели вернуть {dispatch} (объект) вместо dispatch (функция):

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

Это решит проблему. Между прочим, это _является_ поведением по умолчанию, если вы не укажете mapDispatchToProps , так что вы можете полностью удалить его и вообще не передавать его connect() .

Надеюсь, это поможет!

Большое вам спасибо за вашу помощь и подробное объяснение, которое вы предоставили!

Была ли эта страница полезной?
0 / 5 - 0 рейтинги