Декларативная выборка данных с React Async
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.
React JS. Основы
Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения
Получить курс сейчас!
JavaScript //NPM npm install — save react-async //Yarn yarn add react-async
12345 | //NPMnpm install — save react-async //Yarnyarn add react-async |
У нее более 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 для получения данных.
JavaScript import React, { Component } from «react»; import ReactDOM from «react-dom»; import «./styles.css»; import Async from «react-async»; const loadUsers = () => fetch(«https://jsonplaceholder.typicode.com/users») .then(res => (res.ok ? res : Promise.reject(res))) .then(res => res.json()); const App = () => ( <Async promiseFn={loadUsers}> {({ data, error, isLoading }) => { if (isLoading) return «Loading…»; if (error) return `Something went wrong: ${error.message}`; if (data) return ( <div> <h2>React Async — Users</h2> {data.map(el => ( <li> {el.name} — {el.email} </li> ))} </div> ); return null; }} </Async> ); const rootElement = document.getElementById(«root»); ReactDOM.render(<App />, rootElement);
123456789101112131415161718192021222324252627282930313233 | import React, { Component } from «react»;import ReactDOM from «react-dom»;import «./styles.css»;import Async from «react-async»; const loadUsers = () => fetch(«https://jsonplaceholder.typicode.com/users») .then(res => (res.ok ? res : Promise.reject(res))) .then(res => res.json()); const App = () => ( <Async promiseFn={loadUsers}> {({ data, error, isLoading }) => { if (isLoading) return «Loading…»; if (error) return `Something went wrong: ${error.message}`; if (data) return ( <div> <h2>React Async — Users</h2> {data.map(el => ( <li> {el.name} — {el.email} </li> ))} </div> ); return null; }} </Async>); const rootElement = document.getElementById(«root»);ReactDOM.render(<App />, rootElement); |
В приведенном выше примере fetch API используется для выполнения вызова API внутри функции loadUsers. Он возвращает промис. И мы можем получить доступ к props из возвращаемых параметров промиса. Рrops выглядят следующим образом:
data: запрошенные данные с сервера.
error: для случаев, когда возникает ошибка.
isLoading: для сценариев, в которых ответ сервера еще не завершен.
С React Async нам не нужно использовать классы или методы жизненного цикла для извлечения данных и не нужно указывать, как обрабатывать данные.
2. Хук useAsync
Хук useAsync позволяет использовать базовые функции React Async непосредственно в функциональных компонентах. Если вам нравится использовать React Hooks, вы можете использовать useAsync Hook вместо компонента Async. В приведенном ниже примере показано, как мы можем использовать хук useAsync для извлечения данных.
JavaScript import React from «react»; import ReactDOM from «react-dom»; import «./styles.css»; import { useAsync } from «react-async» const loadUsers = () => fetch(«https://jsonplaceholder.typicode.com/users») .then(res => (res.ok ? res : Promise.reject(res))) .then(res => res.json()); const App = () => { const { data, error, isPending } = useAsync({ promiseFn: loadUsers, userId: 1 }) if (isPending) return «Loading…» if (error) return `Something went wrong: ${error.message}` if (data) return ( <div> <h2>React Async — Users</h2> {data.map(el => ( <li> {el.name} — {el.email} </li> ))} </div> ) return null } const rootElement = document.getElementById(«root»); ReactDOM.render(<App />, rootElement);
123456789101112131415161718192021222324252627282930 | import React from «react»;import ReactDOM from «react-dom»;import «./styles.css»;import { useAsync } from «react-async» const loadUsers = () => fetch(«https://jsonplaceholder.typicode.com/users») .then(res => (res.ok ? res : Promise.reject(res))) .then(res => res.json()); const App = () => { const { data, error, isPending } = useAsync({ promiseFn: loadUsers, userId: 1 }) if (isPending) return «Loading…» if (error) return `Something went wrong: ${error.message}` if (data) return ( <div> <h2>React Async — Users</h2> {data.map(el => ( <li> {el.name} — {el.email} </li> ))} </div> ) return null} const rootElement = document.getElementById(«root»);ReactDOM.render(<App />, rootElement); |
Как видите, я передал метод загрузки данных loadUsers в useAsync Hook. И вы можете получить доступ к результату, ошибкам или статусу с помощью props. Библиотека также предлагает еще один хук под названием useFetch, предназначенный для использования с Fetch API.
JavaScript import { useFetch } from «react-async» const AppComponent = () => { const headers = { Accept: «application/json» } const { data, error, isPending, run } = useFetch(«https://jsonplaceholder.typicode.com/users», { headers }, options) //A promiseFn with a fetch request and JSON deserialization will be created. //You can then call ‘run’ with an optional callback argument to change the ‘init’ parameter provided to ‘fetch’ at the last minute. function clickHandler1() { run(init => ({ …init, headers: { …init.headers, authentication: «…», }, })) } //Instead, you can use an object that will be shared across ‘init’. //Note that this is not a deep merge, thus properties from the original ‘init’ parameter may be overridden. function clickHandler2() { run({ body: JSON.stringify(formValues) }) } }
1234567891011121314151617181920212223242526 | import { useFetch } from «react-async» const AppComponent = () => { const headers = { Accept: «application/json» } const { data, error, isPending, run } = useFetch(«https://jsonplaceholder.typicode.com/users», { headers }, options) //A promiseFn with a fetch request and JSON deserialization will be created.//You can then call ‘run’ with an optional callback argument to change the ‘init’ parameter provided to ‘fetch’ at the last minute. function clickHandler1() { run(init => ({ …init, headers: { …init.headers, authentication: «…», }, })) } //Instead, you can use an object that will be shared across ‘init’.//Note that this is not a deep merge, thus properties from the original ‘init’ parameter may be overridden. function clickHandler2() { run({ body: JSON.stringify(formValues) }) }} |
3. Функция createInstance()
React Async предлагает фабричную функцию createInstance(). Она позволяет создавать экземпляры компонентов с такими параметрами по умолчанию, как onResolve и onRejectcallbacks. В приведенном ниже примере показано, как мы можем создать собственный экземпляр Asynccomponent с помощью createInstance().
JavaScript import React from «react»; import ReactDOM from «react-dom»; import «./styles.css»; import { createInstance } from «react-async» const loadUsers = async ({ id }) => { const res = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`) if (!res.ok) throw new Error(res.statusText) return res.json() } const AsyncUser = createInstance({ promiseFn: loadUsers }, «AsyncUser») const App = () => ( <AsyncUser id={1}> <AsyncUser.Fulfilled>{user => `Hello ${user.name}`}</AsyncUser.Fulfilled> </AsyncUser> ) const rootElement = document.getElementById(«root»); ReactDOM.render(<App />, rootElement);
123456789101112131415161718192021 | import React from «react»;import ReactDOM from «react-dom»;import «./styles.css»;import { createInstance } from «react-async» const loadUsers = async ({ id }) => { const res = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`) if (!res.ok) throw new Error(res.statusText) return res.json()} const AsyncUser = createInstance({ promiseFn: loadUsers }, «AsyncUser») const App = () => ( <AsyncUser id={1}> <AsyncUser.Fulfilled>{user => `Hello ${user.name}`}</AsyncUser.Fulfilled> </AsyncUser> ) const rootElement = document.getElementById(«root»);ReactDOM.render(<App />, rootElement); |
По умолчанию createInstance() принимает два входных параметра: defaultOptions и displayName.
React JS. Основы
Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения
Получить курс сейчас!
Функция loadUsers — defaultOption.
AsyncUser — отображаемое имя экземпляра.
Компоненты-помощники в React Async
Помимо компонента Async, React Async предоставляет несколько вспомогательных компонентов, чтобы сделать JSX более декларативным и понятным.
Эти вспомогательные компоненты могут принимать элемент React или функцию и включать или отключать рендеринг в зависимости от текущего состояния. Мы можем передать текущее состояние в useAsync или Async с помощью класса Context. Вот пример использования useAsync с хелперами. Это очень похоже на использование props.
JavaScript import { useAsync, IfPending, IfFulfilled, IfRejected } from «react-async» const loadUsers = async ({id}) => { // … } const MyComponent = () => { const state = useAsync({ promiseFn: loadUsers, id: 1 }) return ( <> <IfPending state={state}>Loading…</IfPending> <IfRejected state={state}>{error => `Something went wrong: ${error.message}`}</IfRejected> <IfFulfilled state={state}> {data => ( <div> <strong>User data:</strong> {JSON.stringify(data,2)} </div> )} </IfFulfilled> </> ) }
1234567891011121314151617181920212223 | import { useAsync, IfPending, IfFulfilled, IfRejected } from «react-async» const loadUsers = async ({id}) => { // …} const MyComponent = () => { const state = useAsync({ promiseFn: loadUsers, id: 1 }) return ( <> <IfPending state={state}>Loading…</IfPending> <IfRejected state={state}>{error => `Something went wrong: ${error.message}`}</IfRejected> <IfFulfilled state={state}> {data => ( <div> <strong>User data:</strong> {JSON.stringify(data,2)} </div> )} </IfFulfilled> </> )} |
В приведенном выше примере я использовал три вспомогательных компонента:
IfPending — отображается только пока промис находится в ожидании (загрузка / отключение).
IfRejected — отображается только в том случае, если промис отклонен.
IfFulfilled — отображается только тогда, когда промис выполнен (преобразовано в значение, может быть неопределенным).
Компоненты-помощники могут повысить удобочитаемость ваших функций рендеринга, устраняя необходимость в записи условных возвратов.
Дополнительные возможности React Async
В React Async есть специальный пакет DevTools, который упрощает отладку и разработку асинхронных состояний приложения. Вы можете установить его с помощью NPM или Yarn:
JavaScript //NPM npm install —save react-async-devtools //Yarn yarn add react-async-devtools
12345 | //NPMnpm install —save react-async-devtools //Yarnyarn add react-async-devtools |
После установки вам необходимо импортировать его и отобразить компонент DevTools в корне вашего приложения следующим образом:
JavaScript import DevTools from «react-async-devtools» export const Root = () => ( <> <DevTools /> <App /> </> )
12345678 | import DevTools from «react-async-devtools» export const Root = () => ( <> <DevTools /> <App /> </>) |
Кроме того, 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
Источник: webformyself.com