Сценарий
- 2 Предоставлены компоненты контейнера
- Каждый контейнер подписан на единицу состояния «Корзина». В рамках своей componentDidUpdate они должны перейти и повторно получить данные из API ценообразования и отобразить результаты (т. Е. Промежуточные итоги с предложениями и т. Д.)
Изображение нескольких контейнеров, пытающихся получить данные в одно и то же время
Выпуск
Проблема в том, что произойдет гонка. Когда корзина обновляется, поток выглядит примерно так
Component1 compenentDidUpdate запущен из-за обновления корзины
- Проверьте, является ли
pricingDetails.isLoading false, если нет данных
- Dispatch
fetchPricingData() - это установит pricingDetails.isLoading в false
Компонент 2 componentDidUpdate запущен
- Проверьте, * * * * * * * * * * * * * * * * *
pricingDetails.isLoading * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *1045* * * * * * * * * * * * * * * * * * *1045* * * * * * * * * * * * * * * * * * * * *1045* Компонент 2 .
- Выполните второй вызов
fetchPricingData - теперь у нас есть 2 вызова API на ходу!
Решение
В настоящее время, кажется, есть несколько способов справиться с этим, но ни один из них не особенно элегантен
1) Делегировать ответственность за выборку данных в контейнер более высокого уровня, где когда-либо будет существовать только один их экземпляр.
2) Пусть каждый контейнер каким-либо образом использует настройку «ведомый / ведущий», где только 1 начальный экземпляр может получать данные.