Лучшие практики для объединения асинхронных данных в React - PullRequest
Новая
       23

Лучшие практики для объединения асинхронных данных в React

1 голос
/ 24 мая 2019

В настоящее время я делаю три вызова API в 3 отдельных эпиках и обновляю конкретные состояния с помощью 3 возвращенных объектов обещания.После того, как состояния обновляются с помощью Redux, я пытаюсь объединить все 3 массива в определенном порядке, а затем отобразить их на странице.Я считаю, что есть проблема, поскольку они асинхронные и данные возвращаются в разное время.Мой компонент, который отображает данные, ищет этот объединенный массив, но массив не заполняется полностью до того, как произойдет рендеринг.

Иногда в массиве будет пара объектов, а иногда - 50, когда я ищу ту же самую вещь.Я знаю, какое точное количество объектов данных предполагается вернуть.Где должно быть наилучшее место для сбора всех данных, когда я отправляю поисковый запрос, когда данные отображаются на странице?Прямо сейчас я выполняю concat в componentDidMount компонента, который должен визуализировать данные, но он не является надежным.

Попытался объединить 3 массива в один в отдельной функции и затем передать его в редуктор.

Также попытался выполнить конкатенацию внутри componentDidMount и затем передать его в редуктор.

Невозможно отобразить код.

1 Ответ

0 голосов
/ 24 мая 2019

Самое простое, что вы, вероятно, могли бы сделать - это иметь одну конечную точку API, которая возвращает вам три объединенных массива, в основном передавая эту логику на сервер. Но если это неосуществимо ...

Я думаю, что причина того, что ваш код работает не так, как вы хотите, заключается в том, что componentDidMount сработает только один раз - когда компоненты изначально монтируются. Поскольку разные вызовы возвращаются по-разному, вы увидите только то, что было загружено, когда componentDidMount произошел пожар.

Некоторые возможные идеи:

  • Один из подходов, который вы можете использовать, - передать эти три массива в ваш компонент в качестве реквизитов и объединить их в методе render. По мере заполнения каждого из них ваш компонент будет перерисовываться и обновляться.

  • Лично я бы счел вызов concat «логикой данных» (а не «логикой представления»), и поэтому было бы неплохо не допустить его в ваши реагирующие компоненты. Вы можете использовать что-то вроде Повторно выбрать , чтобы переместить логику в ваш код избыточности.

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

...