Невозможно отправить в середине отправки

Итак, ошибка, которую я получаю:

Uncaught (in promise) Error: Invariant Violation: Dispatch.dispatch(...): Cannot dispatch in the middle of a dispatch.(…)

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

Весь код можно найти в репозитории github.

Заранее спасибо !


reactjs firebase alt
person Jannes V    schedule 12.02.2016    source источник

Ответы (2)


arrow_upward
5
arrow_downward

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

Вы используете плохой шаблон потока, когда компоненты «презентации» взаимодействуют с вашим диспетчером/магазинами. Правильный подход, как указано в документации по потоку, заключается в том, чтобы один компонент верхнего уровня обрабатывал отправки и передавал состояние другим компонентам через реквизиты. В вашем случае компонент App является единственным, который должен знать о хранилищах или может отправлять действия.

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

person EugeneZ    schedule 12.02.2016
comment
Большое спасибо. Как указано в моем репо, это просто для изучения React и Flux. Так что я учусь на ходу. - person Jannes V; 12.02.2016
comment
Без проблем. Когда я начал работать с React, я совершил ту же ошибку, за исключением того, что это был полный проект... исправление которого заняло много времени. - person EugeneZ; 12.02.2016
comment
Я до сих пор не могу понять, как заставить его работать. Я разместил все свои магазины в своем приложении и передал реквизит. Я могу загрузить свои годы. Но всякий раз, когда я пытаюсь загрузить своих учеников, я получаю ту же ошибку. Я попытался загрузить его, когда получил реквизит, поэтому отправка должна была завершиться. Внутри функции ReceivedYears. вот так: StudentsStore.getStudents(selectedModule.students) сразу после setState - person Jannes V; 13.02.2016
comment
Я не вижу обновленного кода на Github, поэтому не могу быть уверен, но вы также получаете вызов StudentsStore.getStudents из приложения? Вы должны быть. Это может показаться нелогичным (я получаю информацию о студенте, а это компонент студента, он должен это делать!), но все ваши компоненты, кроме приложения, должны совершенно не знать об отправках. Таким образом, только приложение знает, когда оно отправляет что-либо, и вы можете убедиться, что оно выполняет только одну отправку за раз. Если вы хотите получать данные из нескольких хранилищ одновременно, вам нужна одна отправка, которая заполняет несколько хранилищ. - person EugeneZ; 13.02.2016

arrow_upward
2
arrow_downward

вы можете использовать опцию «отложить» в диспетчере. В вашем случае это будет так:

StudentAction.getStudents.defer(options);
person abhisekpaul    schedule 10.10.2016