Flux: Как сделать операцию ждать в магазине?

Question

Я привязываюсь к узлам с проблемой Реактирования, которая, я уверен, не может быть такой трудной, как мне кажется прямо сейчас.

Я создаю одностраничное приложение против API сервера RESTful, который возвращает ресурсы вместе со ссылками, которые описывают, что можно сделать с этим ресурсом. И я пытаюсь обеспечить, чтобы айсхас моего клиента использовал только URL-адреса, полученные с сервера таким образом. Так, например, мой LoggedInSessionStore содержит URL-адрес, который позволяет мне получать список всех открытых документов, скажем.

Проблема заключается в том, как управлять зависимостями между действиями и магазинами. Например, когда срабатывает действие для извлечения всех открытых документов, ему необходимо получить свой URL-адрес из LoggedInSessionStore. Но этот магазин еще не заселен; поэтому действие не должно срабатывать, пока не завершится предыдущее действие (выбор сеанса входа).

Итак, мне нужно действие, которое может извлекать данные сервера, используя URL-адрес, который хранится в хранилище. Каков приемлемый способ гарантировать, что действие не может быть выполнено до тех пор, пока этот магазин не будет заполнен?

Answer 1

TL; DR Не храните URL в своих магазинах. Пусть ваши действия обрабатывают вызовы API.

В целом при использовании Flux ваши действия не должны знать о ваших магазинах. Данные в потоке приложения подразумевается течь в одном направлении:

Components --> Actions --> Dispatcher --> Stores --> Components 

Ваши Реагировать компоненты создают действия, которые затем Отправляется диспетчером в ваших магазинах. Магазины будут уведомлены о действиях посредством зарегистрированного обратного вызова и будут соответствующим образом обновляться. Компоненты будут слушать магазины, чтобы обновить себя, и они соответственно обновят свое собственное состояние. Таким образом, круг завершен.

Суть в том: действия не должны зависеть от магазинов

То, что я хотел бы предложить, что вы двигаетесь все ваши логики API в действия. Сюда входят URL-адреса вашего API. Это довольно распространенная картина в приложениях Flux:

1. Компонент запускает операцию выборки по componentDidMount. Отображает загрузчик, поскольку он еще не имеет данных, необходимых для рендеринга.
2. Действие fetch вызывает вызов AJAX для извлечения данных с сервера.
3. Когда данные поступают от сервера, действие отправляет его в качестве полезной нагрузки
4. Магазина видит полезную нагрузку и устанавливает свое внутреннее состояние на основе принесенных данных
5. Компонент видит, что магазин был обновлен, и соответственно обновляет свое собственное состояние. Это заставляет его отображать приложение, а не только загрузчик.

Альтернативный вариант - ваша логика выборки внутри ваших магазинов, включая код запроса AJAX. Я считаю, что бывшим легче рассуждать (магазины ничего не знают, они просто реагируют на данные, когда они доступны), но все зависит от вас, как вы хотите его реализовать. Просто убедитесь, что логика выборки API: только в одном месте, а не разделить между действиями и магазинами.

Эта нить также может быть полезна: Should flux stores, or actions (or both) touch external services?