Стратегия React Fetcher

Извлечение данных — вероятная история в большинстве приложений React. Есть несколько способов сделать это. Здесь мы рассмотрим создание одного компонента для выполнения этой работы.

вступление

В настоящее время наиболее распространенным способом извлечения данных является использование функции componentDidMount. Это вызывает нужные нам данные, затем мы setState используем эти данные в нашей функции рендеринга. Если у нас есть много компонентов в нашем приложении, использующих один и тот же шаблон, это вызывает много повторений. Использование такого HOC может быть больше:

• Удобочитаемый
• Масштабируемость
• Тестируемый

Все это большие преимущества при создании растущего приложения React.

Что мы строим?

Информационное приложение о стране с двумя страницами — так что это СПА! Каждая страница потребует получения данных заранее. Мы сделаем запрос, используя компонент Fetcher, который сделает всю работу за нас. Это компонент высшего порядка (HOC).

Настраивать

Вам нужно создать приложение для реагирования (https://reactjs.org/docs/create-a-new-react-app.html#create-react-app), и мы будем использовать страны REST в качестве источника данных. Предполагается базовое знание React.

npx create-react-app architecture_fetcher
cd architecture_fetcher
npm start

Установите React Router DOM и axios для маршрутизации и запроса соответственно:

npm install -save react-router-dom
npm install -save axios

Как только это будет сделано, откройте проект в выбранном вами редакторе.

Давайте начнем

В App.js мы хотим настроить наши маршруты и ссылки для разных страниц нашего приложения. Замените то, что есть:

Без компонента Fetcher более высокого порядка, скорее всего, мы получили бы все страны при монтировании компонента Countries. Точно так же мы получим все англоязычные страны при установке компонента Language. Это будет означать, что компонент Countries выглядит так:

…И наш компонент Languages будет таким же.

Однако мы могли бы создать компонент, который извлекает это для нас и который можно использовать повторно. Мы назовем это компонентом Fetcher.

Здесь мы обрабатываем состояние и процесс обработки запроса в одном месте.

Теперь мы можем создать компонент Countries:

Точно так же мы можем использовать тот же шаблон с компонентом Languages:

Теперь мы видим, что компоненты Countries и Languages отвечают только за рендеринг, а не за выборку данных. Это то, что делает архитектуру хорошей масштабируемой и упрощает ее тестирование.

Вывод

Использование этого подхода означает использование компонента высшего порядка (HOC). Это позволяет нам отделить части наших приложений, которые делают разные вещи, простым способом. Мы могли бы расширить этот компонент для обработки различных запросов без дублирования кода в дочерних компонентах.

В этом примере особой сложности нет. Однако наше приложение Fetcher может расти, и мы можем тестировать сценарии, включающие несколько запросов или даже запросы разных типов.