Redux Toolkit Query может облегчить большую часть вашей работы по управлению данными. Узнайте, как.

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

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

Запрос инструментария Redux (RTK Query) — это инструмент для извлечения данных, созданный на основе Redux Toolkit. Его официальная документация описывает RTK Query как «мощный инструмент выборки и кэширования данных, предназначенный для упрощения общие случаи загрузки данных в веб-приложение, устраняющие необходимость вручную писать логику выборки и кэширования данных сам".

instagram viewer

По сути, он предоставляет набор функций и возможностей, которые упрощают процесс извлечения и управления данными из API или любого другого источника данных из приложения React.

Несмотря на то, что между Redux Toolkit Query и React Query есть сходство, одним из основных преимуществ Redux Toolkit Query является его бесшовная интеграция с Redux, библиотека управления состоянием, что позволяет использовать полное решение для извлечения данных и управления состоянием для приложений React при совместном использовании.

Некоторые из основных функций RTK включают кэширование данных, функцию управления запросами и обработку ошибок.

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

mkdir React-RTQ
компакт-диск React-RTQ
npx create-реагировать-приложение реагировать-rtq-пример
cd реагировать-rtq-пример 
запуск нпм

Кроме того, вы можете настроить проект React с помощью Vite, новый инструмент сборки и сервер разработки для веб-приложений.

Вы можете найти код этого проекта в этом Репозиторий GitHub.

Установите необходимые зависимости

Как только ваш проект React будет запущен и запущен, установите следующие пакеты.

npm установить @reduxjs/toolkit

Определить фрагмент API

Фрагмент API — это компонент, который включает в себя необходимую логику Redux для интеграции и взаимодействия с указанными конечными точками API. Он предоставляет стандартизированный способ определения как конечных точек запроса для выборки данных, так и конечных точек мутации для изменения данных.

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

в источник каталог, создайте новую папку и назовите ее, функции. Внутри этой папки создайте новый файл: apiSlice.js, и добавьте код ниже:

Импортировать { createApi, fetchBaseQuery } от"@reduxjs/инструментарий/запрос/реакция";
экспортконстанта productsApi = createApi({
 путь редуктора: "продуктыАп",
 базовый запрос: fetchBaseQuery({ базовый URL: " https://dummyjson.com/" }),


 конечные точки: (строитель) => ({
 getAllProducts: builder.query({
 запрос: () =>"продукты",
 }),
 getProduct: builder.query({
 запрос: (продукт) =>`продукты/поиск? д=${продукт}`, 
 }),
 }),
});
экспортконстанта { useGetAllProductsQuery, useGetProductQuery } = productsApi;

Этот код определяет срез API, называемый продуктыАпи используя Redux Toolkit создатьApi функция. Слайс API принимает следующие свойства:

  • А редукторПуть свойство — задает имя редуктора в магазине Redux.
  • базовый запрос свойство — указывает базовый URL-адрес для всех запросов API, использующих fetchBaseQuery функция, предоставляемая Redux Toolkit.
  • API конечные точки - укажите доступные конечные точки для этого фрагмента API, используя строитель объект. В этом случае код определяет две конечные точки.

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

Этот подход упрощает управление состоянием и выборку данных в приложении React.

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

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

В каталоге src создайте store.js файл и добавьте следующие строки кода:

Импортировать { настроить магазин } от"@reduxjs/инструментарий";
Импортировать {продуктыАпи} от"./функции/apiSlice";
экспортконстанта магазин = настроить магазин ({
 редуктор: {
 [productsApi.reducerPath]: productsApi.reducer,
 },
 промежуточное ПО: (ПО промежуточного слоя getDefault) =>
 getDefaultMiddleware().concat (productsApi.middleware),
});

Этот код создает новый магазин Redux с двумя основными элементами конфигурации:

  1. Редуктор: это определяет, как хранилище должно обрабатывать обновления состояния. В этом случае продуктыApi.редуктор передается как функция редуктора и получает уникальный ключ reducerPath, чтобы идентифицировать его в общем состоянии хранилища.
  2. ПО промежуточного слоя: это определяет любое дополнительное ПО промежуточного слоя, которое должно применяться к магазину.

Результирующий магазин object — это полностью настроенное хранилище Redux, которое можно использовать для управления состоянием приложения.

Настроив хранилище таким образом, приложение может легко управлять состоянием запросов API и стандартизированным образом обрабатывать их результаты с помощью Redux Toolkit.

Создайте компонент для реализации функциональности RTK

В каталоге src создайте новый компоненты папка с новым файлом внутри: Данные.js.

Добавьте этот код в файл Data.js:

Импортировать { useGetAllProductsQuery } от"../функции/apiSlice";
Импортировать Реагировать, {useState} от"реагировать";
Импортировать"./продукт.компонент.css";
экспортконстанта Данные = () => {
константа { данные, ошибка, isLoading, refetch } = useGetAllProductsQuery();
константа [productsData, setProductsData] = useState([]);


константа дескрипторDisplayData = () => {
 обновить();
 setProductsData(данные?.продукты);
 };
возвращаться (
"продукт-контейнер">

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

Когда пользователь нажимает кнопку «Отобразить данные», выполняется функция handleDisplayData, которая отправляет HTTP-запрос в API для получения данных о продукте. После получения ответа переменная данных продуктов обновляется данными ответа. Наконец, компонент отображает список сведений о продукте.

Обновите компонент приложения

Внесите следующие изменения в код в файле App.js:

Импортировать"./Приложение.css";
Импортировать { Данные } от"./компоненты/данные";
Импортировать { магазин } от"./магазин";
Импортировать { Провайдер } от"реагировать-редукс";
Импортировать {Апипровайдер} от"@reduxjs/инструментарий/запрос/реакция";
Импортировать {продуктыАпи} от"./функции/apiSlice";
функцияПриложение() {
возвращаться (


"Приложение">

 </div>
 </ApiProvider>
 </Provider>
 );
}
экспортпо умолчанию Приложение;

Этот код оборачивает компонент данных двумя поставщиками. Эти два провайдера предоставляют компоненту доступ к хранилищу Redux и функциям RTK Query, что позволяет ему извлекать и отображать данные из API.

Redux Toolkit Query легко настроить для эффективного извлечения данных из указанного источника с минимальным кодом. Кроме того, вы также можете включить функции для изменения сохраненных данных, определив конечные точки изменения в компоненте среза API.

Объединив функции Redux с возможностями извлечения данных RTK, вы можете получить комплексное решение для управления состоянием своих веб-приложений React.