Теперь наш генеральный директор пишет прямо в своем аккаунте Medium. Следуйте за ним, чтобы узнать о блокчейне, искусственном интеллекте, игровом дизайне и стартапах: https://medium.com/@ccerrato147
Привет, в этом посте я представлю вам интерфейсную архитектуру приложения ReactJS с ReduxJS для управления состоянием. Это очень популярная комбинация в наши дни, и мы потратили время на недавний проект.
Прежде чем продолжить, важно уточнить, что такое OData, поскольку вы часто будете видеть это в этом сообщении в блоге. На официальной странице он определен как «Протокол открытых данных, стандарт OASIS, который определяет набор передовых методов для создания и использования RESTful API». Многие системы реализуют этот стандарт, и существуют платформы для большинства популярные языки на случай, если вы хотите построить с ним свою следующую конечную точку. Для получения дополнительной информации перейдите на официальную веб-страницу:
Использование ReactJS для приложения обеспечивает простой способ создания представлений для каждого состояния в приложении. Компоненты, созданные с помощью ReactJS, можно использовать повторно, таким образом вы экономите время и усилия, разделяя созданные вами компоненты в нескольких представлениях.
Redux - это контейнер состояния для приложений JS, он поддерживает согласованное поведение приложения, обновляя состояние с помощью чистых функций. Это позволяет легко запускать тесты.
Приложение
В этом примере мы будем говорить о веб-приложении Forms, которое размещено на сайте Sharepoint. Приложение состоит из главного экрана, на котором вы можете найти все ссылки на различные формы, которые вы можете отправить. После того, как форма будет отправлена, другой пользователь получит уведомление, чтобы утвердить или отклонить ее.
Схема внешнего интерфейса
На следующей схеме показаны модули внешнего кода:
Объяснение
Компоненты более высокого порядка - это контейнеры ReactJS, которые не видны пользователю, но содержат основные компоненты, к которым пользователь будет получать доступ. Контейнеры предоставляют компонентам пользовательского интерфейса состояние и действия, которые они могут выполнять.
Компоненты UI ReactJS - это те, которые видят пользователи, они представляют собой элементы веб-интерфейса, такие как ярлыки, текстовое поле и раскрывающиеся списки. Они получают параметры, осуществляют доступ к данным, вызывая модуль запроса (например, функцию ajax get), отправляют действия в хранилище redux для обновления состояния, отправляют данные для хранения с помощью служб OData (снова через модуль запроса).
Хранилище ReduxJS получает действия от компонентов UI ReactJS, эти действия содержат информацию, переданную редукторам. Редукторы получают текущее состояние данных, изменяющиеся данные и возвращают новое состояние.
Диаграмма действий - это пример потока, в котором подробно описаны действия и механизмы для получения отправленной формы:
В приведенном выше примере пользователь получает определенную форму с идентификатором. Компонент UI ReactJS вызывает функцию получения, определенную в модуле запроса, эти функции содержат модульность для работы всех форм и организацию данных для выполнения запроса (создание очень полезных отдельных функций для динамического получения данных). Модуль запроса запускает асинхронную функцию ajax для служб OData, они отвечают объектом JSON, который передается обратно компоненту UI ReactJS модулем запроса после сортировки, фильтрации и преобразования в неизменяемый объект JS. Затем компонент UI ReactJS обновляет состояние и повторно отображает себя, чтобы представить пользователю всю информацию, полученную в результате запроса.
На этом пока что, надеюсь, этот пост окажется для вас полезным.
На Redux повлияла архитектура Facebook для приложений React.js. Они хорошо сочетаются друг с другом, как яйца и бекон.
Альберто Серрато, разработчик Xourse
