RTK Query — это надежный инструмент для выборки и кэширования данных. Он предназначен для упрощения распространенных случаев загрузки данных в веб-приложение, избавляя от необходимости вручную писать логику выборки и кэширования данных.

Как разработчик, вы должны знать, что помимо выполнения вызовов API для создания приложения вам также потребуется позаботиться о различных других действиях, например:

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

RTK Query можно использовать для обработки всех этих действий наряду с вызовами API. Он имеет встроенную логику извлечения и кэширования данных поверх API-интерфейсов Redux Toolkit.

Почему RTK-запрос?

Хотя существуют и другие доступные инструменты, которые можно использовать для решения вышеуказанных проблем, вам следует использовать RTK Query по следующим причинам:

  • У вас уже есть существующее приложение Redux, и вы хотите упростить логику работы с API.
  • Вы хотите иметь возможность использовать популярное расширение Redux Dev Tools для отслеживания изменений вашего состояния с течением времени, поскольку RTK Query отправляет стандартные действия redux после обработки запросов.
  • Он предоставляет вам возможность определять все ваши конечные точки в одном месте и предоставляет встроенные перехватчики для вызовов API.

Монтаж

RTK Query поставляется вместе с Redux Toolkit. Поэтому, чтобы настроить его, вам нужно сначала настроить инструментарий redux. Обратите внимание, что в ходе этой статьи мы будем использовать заранее определенный шаблон для настройки приложения React с помощью Vite. С учетом сказанного давайте перейдем к настройке RTK Query.



GitHub — eshankvaish/react-ts-linting: настройка ESLint и Prettier для проекта React TypeScript
Вы не можете выполнить это действие в данный момент. Вы вошли в другую вкладку или окно. Вы вышли на другой вкладке или…github.com



1. Настройте инструментарий Redux

Установите @reduxjs/toolkit через пряжу вместе с react-redux:

yarn add [email protected]
yarn add @reduxjs/[email protected]

2. Добавьте базовую службу для запроса RTK.

Давайте теперь добавим базовую службу для RTK Query, которая будет определять базовый URL-адрес для конечных точек API вместе с тайм-аутом по умолчанию для вызовов API. baseApi использует встроенную оболочку fetchBaseQuery RTK Query, созданную поверх fetch для выполнения вызовов API по умолчанию.

3. Настройте магазин Redux

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

4. Добавьте поставщика React Redux

Давайте добавим React Redux Provider в файл main.tsx или index.tsx вашего проекта, чтобы контекст redux был доступен во всем приложении.

5. Добавьте фрагмент API

Давайте теперь настроим часть API для вызова конечной точки /users для базового URL-адреса, чтобы получить список пользователей. Мы собираемся динамически внедрять конечные точки, а не определять все конечные точки в одном файле, чтобы лучше управлять нашими службами API. RTK Query поддерживает автоматическую повторную выборку данных путем определения и аннулирования тегов. Если конечная точка запроса API предоставляет тег API, а тот же тег становится недействительным в результате другой мутации, то RTK Query автоматически инициирует новый запрос для запроса, предоставившего тег.

Это в значительной степени настройка, которая нам нужна для вызова API в React. Теперь давайте перейдем к useUsersQuery действию.

6. Использование хука API для получения данных

Чтобы сделать вызов API с помощью определенного выше хука, нам просто нужно добавить его к компоненту UserList, определенному ниже, и он вернет объект с набором параметров, таких как isFetching, data и error и т. д. Мы можем отобразить состояние загрузки с помощью isFetching, и как только переменная data станет доступной, мы можем просто перебрать ее, чтобы отобразить список пользователей на нашей странице.

7. Обновить файл приложения

Чтобы увидеть вызов API в действии, вам нужно добавить компонент <UserList /> внутрь файла App.tsx и запустить сервер.

Заключение

Мы, наконец, сделали наш API-вызов API-заполнителя JSON, чтобы получить список пользователей и отобразить его на странице UserList.

Как всегда, вот ссылка на полный код на Github:



GitHub — eshankvaish/react-rtk-query: Настройка запроса RTK с помощью React
В настоящее время вы не можете выполнить это действие. Вы вошли в другую вкладку или окно. Вы вышли на другой вкладке или…github.com



Спасибо, что прочитали. Поделитесь своими мыслями о настройке RTK Query для выполнения вызовов API в приложениях React. Кроме того, если вы нашли эту статью полезной, рассмотрите возможность подписаться на меня на Medium и поделиться этой статьей в своем кругу.

Want to connect?
Reach out on Twitter, LinkedIn or in the comments below!

Рекомендации

Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .

Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.