response-redux RangeError: превышен максимальный размер стека вызовов

Question

Я получаю эту ошибку, когда извлекаю данные для своего графика (response-chartjs-2). Я реализую блок try/catch и не знаю, как устранить эту ошибку. В браузере Edge я получаю CRIPT28: SCRIPT28: недостаточно места в стеке

Uncaught (in promise) RangeError: Maximum call stack size exceeded
    at trackProperties (trackForMutations.js:16)
    at trackProperties (trackForMutations.js:32)
    at trackProperties (trackForMutations.js:32)
    at trackProperties (trackForMutations.js:32)
    at trackProperties (trackForMutations.js:32)
    at trackProperties (trackForMutations.js:32)
    at trackProperties (trackForMutations.js:32)
    at trackProperties (trackForMutations.js:32)
    at trackProperties (trackForMutations.js:32)
    at trackProperties (trackForMutations.js:32)
Promise.catch (async)
(anonymous) @ ordersActions.js:44
(anonymous) @ index.js:9
(anonymous) @ index.js:43
(anonymous) @ index.js:55
(anonymous) @ bindActionCreators.js:5
loadDataForChart @ OrdersChart.js:96
boundFunc @ ReactErrorUtils.js:63
ReactErrorUtils.invokeGuardedCallback @ ReactErrorUtils.js:69
executeDispatch @ EventPluginUtils.js:83
executeDispatchesInOrder @ EventPluginUtils.js:106
executeDispatchesAndRelease @ EventPluginHub.js:41
executeDispatchesAndReleaseTopLevel @ EventPluginHub.js:52
forEachAccumulated @ forEachAccumulated.js:22
processEventQueue @ EventPluginHub.js:252
runEventQueueInBatch @ ReactEventEmitterMixin.js:15
handleTopLevel @ ReactEventEmitterMixin.js:25
handleTopLevelImpl @ ReactEventListener.js:70
perform @ Transaction.js:141
batchedUpdates @ ReactDefaultBatchingStrategy.js:60
batchedUpdates @ ReactUpdates.js:95
dispatchEvent @ ReactEventListener.js:145

Вот действие, которое я вызываю в своем компоненте.

 export function getDataForChart(dtStart, dtEnd) {

      return function (dispatch) {
        let actionUrl = new Localization().getURL(baseUrl, 'GetDataForChart');
        dispatch({ type: types.CHARTSUMMARY });


        return axios.post(actionUrl, { dateStart: dtStart, dateEnd: dtEnd }, {
          headers: {
            'RequestVerificationToken': antiForgeryToken.value,
            'X-Requested-With': 'XMLHttpRequest'
          }
        }).then((response) => {
          dispatch({ type: types.CHARTSUMMARY_LOADED, payload: response.data })
        }).catch((error) => {
          dispatch({ type: types.CHARTSUMMARY_REJECTED, payload: error })

        })
      }
    }

Вот мой компонент, который связан с избыточным магазином. Мне кажется, все хорошо.

    export class OrdersChart extends Component {
        constructor(props) {
            super(props)
            this.state = {
                eStart: moment(),
                eEnd: moment(),
                chartData: {},
                chartLoaded: false,
                chartStart: false
            }


            this.loadDataForChart = this.loadDataForChart.bind(this);
        }

        componentWillReceiveProps(nextProps) {
            const { chartData, chartLoaded, chartStart } = nextProps;
            if(this.state.chartData != chartData) {
                this.setState({ chartData, chartLoaded, chartStart })
            }
        }
        loadDataForChart() {
            this.props.actions.getDataForChart(this.state.eStart, this.state.eEnd);
        }

        render() {
            return (
                <div>
               /* Date pickers ...*/
          <BtnReload onClick={this.loadDataForChart}></BtnReload>
                  <Line data={this.state.chartData} options={{ tooltips: { mode: 'x' } }} />       
                </div>
            )
        }
    }

    function mapStateToProps(state) {
        return {
            chartData: state.chart.ChartData,
            chartLoaded: state.chart.chartLoaded,
            chartStart: state.chart.fetching
        }
    }

    function mapDispatchToProps(dispatch) {
        return {
            actions: bindActionCreators(Object.assign({}, ordersActions), dispatch)
        }
    }
    export default connect(mapStateToProps, mapDispatchToProps)(OrdersChart)

Answer 1

Немного поздно, но, вероятно, из-за циклических ссылок в вашем штате. Проверьте эту проблему: https://github.com/leoasis/redux-immutable-state-invariant/issues/15

По словам автора пакета (в разговоре по ссылке выше):

Какая у вас форма? Похоже, что в вашем состоянии могут быть циклические зависимости, которые вызывают проблемы с тем, как мы проходим через него для отслеживания мутаций.

Чтобы исправить эту ошибку, вы можете удалить циклические ссылки в своем состоянии или настроить invariant промежуточное программное обеспечение, чтобы игнорировать эту ветвь вашего состояния следующим образом, используя синтаксис пути к объекту:

invariant({ ignore: ['path.to.ignore'] })

Answer 2

Код, который вы вставляете сюда, некомпетентен, но в соответствии с вашей ошибкой вы, безусловно, вызываете цикл через ваш компонент, поэтому проверяйте, где бы вы ни вызывали свои методы повторно. в вашем коде, я подозреваю, что вы меняете свое состояние, и оно использовалось в вашем методе рендеринга.

Answer 3

Это не столько ответ, сколько общая помощь по этой ошибке.

Я получил эту ошибку из-за неправильной обработки ответа Firebase. Пробовал слить без трансформации. я используюredux-actionsчтобы обрабатывать мои изменения состояния здесь. Итак, изначально у меня было:

[t.FIREBASE_SUCCESS]: (state, { payload }) => change(state, { $merge: payload }),

Но мне нужен был извлеченный объект данных:

[t.FIREBASE_SUCCESS]: (state, { payload }) => change(state, { $merge: payload.data() }),

В payload.data() это единственное изменение.