Декларативная выборка данных с React Async

Декларативная выборка данных с React Async

От автора: в JavaScript мы обычно используем async / await для асинхронных операций, таких как выборка данных. То же самое и при использовании библиотек пользовательского интерфейса, таких как React. Но что, если вместо этого вы получите возможность использовать компонент и хук React для извлечения данных?

React Async делает именно это, предоставляя компонентный подход для извлечения данных из API. В этой статье я расскажу о его основных функциях.

Введение в React-Async

React Async — это библиотека на основе промисов, которая предлагает декларативный API для выполнения вызовов API. Она предоставляет компонент React и хук для декларативного разрешения промисов и выборки данных.

React Async совместим практически со всеми библиотеками и API для извлечения данных, включая Fetch API, Axios и GraphQL. Кроме того, он также хорошо работает с React Native.

Установка React Async

Установить библиотеку React Async довольно просто. Вы можете обращаться с ней как с любой другой библиотекой JavaScript и устанавливать ее с помощью NPM или Yarn.

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Смотреть видео

У нее более 33 тысяч загрузок в неделю и 2 тысячи звезд на GitHub.

Примечание: не забудьте установить React как зависимость для этого пакета. Вам понадобится react @16.8.0 или выше, если вы хотите использовать хук useAsync.

Основы React Async

React Async — простая библиотека. Для начала вам необходимо ознакомиться с тремя основными API:

Компонент Async.

Хук useAsync.

Функция createInstance.

Итак, давайте подробно рассмотрим, что это за API и как они используются.

1. Компонент Async

Компонент Async — это классический интерфейс React Async, и мы можем использовать его, чтобы сделать компоненты React более декларативными. Мы можем напрямую использовать компонент Async в JSX для применения паттерна props. Ниже приведен простой пример использования компонента Async для получения данных.

В приведенном выше примере fetch API используется для выполнения вызова API внутри функции loadUsers. Он возвращает промис. И мы можем получить доступ к props из возвращаемых параметров промиса. Рrops выглядят следующим образом:

data: запрошенные данные с сервера.

error: для случаев, когда возникает ошибка.

isLoading: для сценариев, в которых ответ сервера еще не завершен.

С React Async нам не нужно использовать классы или методы жизненного цикла для извлечения данных и не нужно указывать, как обрабатывать данные.

2. Хук useAsync

Хук useAsync позволяет использовать базовые функции React Async непосредственно в функциональных компонентах. Если вам нравится использовать React Hooks, вы можете использовать useAsync Hook вместо компонента Async. В приведенном ниже примере показано, как мы можем использовать хук useAsync для извлечения данных.

Как видите, я передал метод загрузки данных loadUsers в useAsync Hook. И вы можете получить доступ к результату, ошибкам или статусу с помощью props. Библиотека также предлагает еще один хук под названием useFetch, предназначенный для использования с Fetch API.

3. Функция createInstance()

React Async предлагает фабричную функцию createInstance(). Она позволяет создавать экземпляры компонентов с такими параметрами по умолчанию, как onResolve и onRejectcallbacks. В приведенном ниже примере показано, как мы можем создать собственный экземпляр Asynccomponent с помощью createInstance().

По умолчанию createInstance() принимает два входных параметра: defaultOptions и displayName.

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Смотреть видео

Функция loadUsers — defaultOption.

AsyncUser — отображаемое имя экземпляра.

Компоненты-помощники в React Async

Помимо компонента Async, React Async предоставляет несколько вспомогательных компонентов, чтобы сделать JSX более декларативным и понятным.

Эти вспомогательные компоненты могут принимать элемент React или функцию и включать или отключать рендеринг в зависимости от текущего состояния. Мы можем передать текущее состояние в useAsync или Async с помощью класса Context. Вот пример использования useAsync с хелперами. Это очень похоже на использование props.

В приведенном выше примере я использовал три вспомогательных компонента:

IfPending — отображается только пока промис находится в ожидании (загрузка / отключение).

IfRejected — отображается только в том случае, если промис отклонен.

IfFulfilled — отображается только тогда, когда промис выполнен (преобразовано в значение, может быть неопределенным).

Компоненты-помощники могут повысить удобочитаемость ваших функций рендеринга, устраняя необходимость в записи условных возвратов.

Дополнительные возможности React Async

В React Async есть специальный пакет DevTools, который упрощает отладку и разработку асинхронных состояний приложения. Вы можете установить его с помощью NPM или Yarn:

После установки вам необходимо импортировать его и отобразить компонент DevTools в корне вашего приложения следующим образом:

Кроме того, React Async предлагает множество вариантов конфигурации для обработки особых сценариев. Эти конфигурации могут быть отправлены как props в <Async {… options}> или как объект для useAsync (options). Некоторые из наиболее часто используемых вариантов конфигурации:

promise — уже запущенный экземпляр Promise.

promiseFn- функция, которая возвращает автоматически вызываемый промис.

initialValue — предоставляет исходные данные или ошибки для рендеринга на стороне сервера.

onResolve — обратный вызов, при разрешении Promise.

onReject — обратный вызов, при отклонении Promise.

onCancel — обратный вызов, при отмене обещания.

Заключение

В этой статье я обсудил, как использовать библиотеку React Async для декларативной выборки данных. Она нацелена на выборку данных как можно ближе к тому месту, где они будут использоваться, просто используя декларативный синтаксис и собственные промисы.

React Async эффективно работает даже в сложных приложениях с обширными зависимостями вложенных данных. Он способствует параллельной загрузке данных на уровне компонентов по запросу, а не массовой загрузки на более высоких уровнях маршрутизации страниц.

Кроме того, React Async был бы идеальным для больших приложений с динамической моделью маршрутизации или без маршрутов, поскольку он полностью не зависит от ваших маршрутов.

Спасибо за внимание!!

Автор: Piumi Liyana Gunawardhana

Источник: blog.bitsrc.io

Редакция: Команда webformyself.

Читайте нас в Telegram, VK, Яндекс.Дзен

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Смотреть видео

ReactJS: основы

Изучите основы ReactJS и создайте ваше первое приложение на ReactJS

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментирование закрыто.