отправить действие через соединение Я получаю сообщение об ошибке Превышен максимальный размер стека вызовов

Question

• Я новичок в редуксе и пытаюсь изучить все с нуля.
• , поэтому я взял пакет npm и внедрил в свою форму
• , когда я пытаюсь отправить действие черезя получаю сообщение об ошибке Превышен максимальный размер стека вызовов
• без подключения он работал нормально.

• Можете ли вы дать мне знать, как это исправить.Я посмотрел оба документа https://www.npmjs.com/package/react-redux-loading-bar https://blog.logrocket.com/react-redux-connect-when-and-how-to-use-it-f2a1edab2013

• Я отладил, установив консоль, но все еще не могу ее исправить.

• можете ли выподскажите, как исправить, чтобы в будущем я исправил это сам.
• предоставив мой фрагмент кода и песочницу ниже.

https://codesandbox.io/s/zn812n05v4

const mapDispatchToProps = dispatch => {
  console.log("mapDispatchToProps--->", dispatch);
  return {
    fetchHistoryBenchmarkDatafromURL: () => {
      dispatch(showLoading("sectionBar"));
      // dispatch(fetchHistoryBenchmarkDatafromURL());
    }
  };
};

export default reduxForm({
  form: "syncValidation", // a unique identifier for this form
  validate, // <--- validation function given to redux-form
  warn // <--- warning function given to redux-form
})(connect(mapDispatchToProps)(SyncValidationForm));

ошибка

RangeError: Maximum call stack size exceeded
    at runBatchedUpdates (ReactUpdates.js:150)
    at ReactReconcileTransaction.perform (Transaction.js:143)
    at ReactUpdatesFlushTransaction.perform (Transaction.js:143)
    at ReactUpdatesFlushTransaction.perform (ReactUpdates.js:89)
    at flushBatchedUpdates (ReactUpdates.js:172)
    at ReactUpdatesFlushTransaction.close (ReactUpdates.js:47)
    at ReactUpdatesFlushTransaction.closeAll (Transaction.js:209)
    at ReactUpdatesFlushTransaction.perform (Transaction.js:156)
    at ReactUpdatesFlushTransaction.perform (ReactUpdates.js:89)
    at flushBatchedUpdates (ReactUpdates.js:172)
    at ReactUpdatesFlushTransaction.close (ReactUpdates.js:47)
    at ReactUpdatesFlushTransaction.closeAll (Transaction.js:209)
    at ReactUpdatesFlushTransaction.perform (Transaction.js:156)
    at ReactUpdatesFlushTransaction.perform (ReactUpdates.js:89)
    at flushBatchedUpdates (ReactUpdates.js:172)
    at ReactUpdatesFlushTransaction.close (ReactUpdates.js:47)
    at ReactUpdatesFlushTransaction.closeAll (Transaction.js:209)
    at ReactUpdatesFlushTransaction.perform (Transaction.js:156)
    at ReactUpdatesFlushTransaction.perform (ReactUpdates.js:89)
    at flushBatchedUpdates (ReactUpdates.js:172)
    at ReactUpdatesFlushTransaction.close (ReactUpdates.js:47)
    at ReactUpdatesFlushTransaction.closeAll (Transaction.js:209)
    at ReactUpdatesFlushTransaction.perform (Transaction.js:156)
    at ReactUpdatesFlushTransaction.perform (ReactUpdates.js:89)
    at flushBatchedUpdates (ReactUpdates.js:172)
    at ReactUpdatesFlushTransaction.close (ReactUpdates.js:47)
    at ReactUpdatesFlushTransaction.closeAll (Transaction.js:209)
    at ReactUpdatesFlushTransaction.perform (Transaction.js:156)
    at ReactUpdatesFlushTransaction.perform (ReactUpdates.js:89)
    at flushBatchedUpdates (ReactUpdates.js:172)
    at ReactUpdatesFlushTransaction.close (ReactUpdates.js:47)
    at ReactUpdatesFlushTransaction.closeAll (Transaction.js:209)
    at ReactUpdatesFlushTransaction.perform (Transaction.js:156)
    at ReactUpdatesFlushTransaction.perform (ReactUpdates.js:89)
    at flushBatchedUpdates (ReactUpdates.js:172)
    at ReactUpdatesFlushTransaction.close (ReactUpdates.js:47)
    at ReactUpdatesFlushTransaction.closeAll (Transaction.js:209)
    at ReactUpdatesFlushTransaction.perform (Transaction.js:156)
    at ReactUpdatesFlushTransaction.perform (ReactUpdates.js:89)
    at flushBatchedUpdates (ReactUpdates.js:172)
    at ReactUpdatesFlushTransaction.close (ReactUpdates.js:47)
    at ReactUpdatesFlushTransaction.closeAll (Transaction.js:209)
    at ReactUpdatesFlushTransaction.perform (Transaction.js:156)
    at ReactUpdatesFlushTransaction.perform (ReactUpdates.js:89)
    at flushBatchedUpdates (ReactUpdates.js:172)
    at ReactUpdatesFlushTransaction.close (ReactUpdates.js:47)
    at ReactUpdatesFlushTransaction.closeAll (Transaction.js:209)
    at ReactUpdatesFlushTransaction.perform (Transaction.js:156)
    at ReactUpdatesFlushTransaction.perform (ReactUpdates.js:89)
    at flushBatchedUpdates (ReactUpdates.js:172)

Answer 1

Вы не должны звонить dispatch во время рендеринга.Следующая строка из SyncValidationForm будет инициировать изменение состояния избыточности, что вызовет повторный рендеринг, который снова выполнит это состояние изменения строки и т. Д.

store.dispatch (showLoading ("sectionBar"));