Как только вы поймете основы взаимосвязи React / Flux, пора добавить асинхронное управление API. Это позволит собирать данные, необходимые для более крупных веб-приложений, с помощью стандартного шаблона. В предыдущем посте я рассмотрел пример приложения Todo, чтобы концептуализировать процесс подключения Flux к представлению React. В этом посте я добавлю вызов API для переноса внешних данных в приложение. Я буду следовать примеру Facebook в их приложении Flux Chat.

Чтобы осмыслить, полезно помнить, что предпосылкой, лежащей в основе модели Action-Dispatcher-Store, является односторонний поток данных.

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

Создать новые константы

Во-первых, мне нужно определить новые константы, которые будут представлять изменения состояния для моего вызова API. Поскольку я хочу сохранить простоту и сосредоточиться на архитектуре, у меня будет только один вызов API со следующими двумя новыми константами: GET_RANDOM и GET_RANDOM_RESPONSE. Я произвольно решил использовать Генератор случайных пользователей в качестве своего API, потому что это простой источник данных и не требует регистрации или аутентификации.

Определите действия

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

Кроме того, я отредактирую существующий файл TodoActions.js, чтобы добавить действие вызова API. Это действие просмотра будет включать вызов функции моего RandomUserAPI, который я еще не создал. Имейте в виду, что я мог бы очень легко добавить параметр для передачи данных через действие getRandom (), если бы мне нужно было отправить данные в API. Поскольку это простой пример, не требующий передачи каких-либо данных в API, вызов выглядит довольно простым:

Добавить служебную программу API

В-третьих, я хочу быть хорошим программистом и разделять свои заботы. Поэтому я собираюсь создать отдельный служебный файл для хранения всей моей логики, связанной с произвольным пользовательским API. Я также собираюсь использовать суперагент в качестве моей HTTP-утилиты.

Добавить данные в магазин

Теперь, когда у меня есть определенные действия, мне нужно добавить случай действия GET_RANDOM_RESPONSE в мой TodoStore.js, чтобы он обновлял хранилище при возврате вызова API. Я случайным образом выбрал некоторые поля из результата Random User API, чтобы поместить его в качестве текста задачи, который был легко помещен в существующий массив списка, представляющий состояние моего списка дел.

Добавить действие в представление

Наконец, мне нужно добавить к представлению кнопку «Случайно», чтобы запустить весь этот процесс. Поскольку у меня нет модного макета, я просто добавлю дублирующую кнопку под существующей. Кроме того, я изменю обработчик события onClick для вызова нового действия getRandom (), созданного мной ранее. Легкость, с которой может быть реализовано это новое действие, является отличным примером мощности и простоты использования и поддержки React для ваших представлений.

Вы можете увидеть полное приложение на GitHub.

Заключение

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

Если вы нашли этот пост полезным, поделитесь им!