Redux Toolkit Query може да облекчи болката от голяма част от работата ви по управление на данни. Открийте как.

React е популярна JavaScript библиотека за изграждане на потребителски интерфейси за уеб приложения. Когато създавате приложение, е важно да обмислите ефективен подход за управление на данни, за да сте сигурни, че извличате и изобразявате данни в браузъра по подходящ начин, в отговор на потребителските взаимодействия.

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

Заявка за Redux Toolkit (RTK Query) е инструмент за извличане на данни, изграден върху Redux Toolkit. Официалната му документация описва RTK Query като „мощен инструмент за извличане на данни и кеширане, предназначен да опрости общи случаи за зареждане на данни в уеб приложение, елиминирайки необходимостта от ръкописно извличане на данни и логика за кеширане себе си".

instagram viewer

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

Въпреки че има прилики между Redux Toolkit Query и React Query, едно основно предимство на Redux Toolkit Query е неговата безпроблемна интеграция с Redux, библиотека за държавно управление, което позволява цялостно решение за извличане на данни и управление на състоянието за React приложения, когато се използват заедно.

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

За да започнете, можете бързо да завъртите проект на React локално, като използвате Създайте React App команда.

mkdir React-RTQ
cd React-RTQ
npx create-react-app react-rtq-example
cd реагира-rtq-пример 
npm стартиране

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

Можете да намерите кода на този проект тук GitHub хранилище.

Инсталирайте необходимите зависимости

След като стартирате вашия проект React, продължете и инсталирайте следните пакети.

npm инсталирайте @reduxjs/toolkit react-redux

Дефинирайте API срез

API срезът е компонент, който включва необходимата логика на Redux за интегриране и взаимодействие с определени крайни точки на API. Той предоставя стандартизиран начин за дефиниране както на крайни точки на заявка за извличане на данни, така и на крайни точки на мутация за модифициране на данните.

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

В src директория, създайте нова папка и я наименувайте, Характеристика. В тази папка създайте нов файл: apiSlice.jsи добавете кода по-долу:

импортиране { createApi, fetchBaseQuery } от"@reduxjs/toolkit/query/react";
износконст productsApi = createApi({
 Път на редуктора: "productsAp",
 baseQuery: fetchBaseQuery({ baseUrl: " https://dummyjson.com/" }),


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

Този код дефинира API срез, наречен productsApi с помощта на Redux Toolkit createApi функция. Срезът на API приема следните свойства:

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

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

Този подход рационализира управлението на състоянието и извличането на данни в приложението React.

Конфигурирайте Redux Store

След като извлече данните от API, RTK Query кешира данните в хранилището на Redux. Магазинът, в този случай, служи като централен център за управление на състоянието на API заявки, направени от React приложение, включително данните, извлечени от тези API заявки, осигуряващи достъп на компонентите и актуализиране на тези данни като необходими.

В директорията src създайте a store.js файл и добавете следните редове код:

импортиране {configureStore} от"@reduxjs/инструментариум";
импортиране {productApi} от"./features/apiSlice";
износконст store = configureStore({
 редуктор: {
 [productsApi.reducerPath]: productsApi.reducer,
 },
 междинен софтуер: (getDefaultMiddleware) =>
 getDefaultMiddleware().concat (productsApi.middleware),
});

Този код създава нов магазин на Redux с две основни части от конфигурацията:

  1. Редуктор: Това определя как магазинът трябва да обработва актуализации на състоянието. В този случай, продуктиApi.редуц се предава като функция за редуциране и получава уникален ключ за редуциране, за да го идентифицира в цялостното състояние на магазина.
  2. Мидълуер: Това дефинира всеки допълнителен междинен софтуер, който трябва да се прилага към магазина.

Получената магазин обектът е напълно конфигуриран магазин на Redux, който може да се използва за управление на състоянието на приложението.

Чрез конфигуриране на магазина по този начин, приложението може лесно да управлява състоянието на API заявките и да обработва техните резултати по стандартизиран начин с помощта на Redux Toolkit.

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

В директорията src създайте нова компоненти папка с нов файл вътре: Data.js.

Добавете този код към файла Data.js:

импортиране {useGetAllProductsQuery} от"../features/apiSlice";
импортиране Реагирайте, {useState} от"реагира";
импортиране"./product.component.css";
износконст Данни = () => {
конст { данни, грешка, isLoading, refetch } = useGetAllProductsQuery();
конст [productsData, setProductsData] = useState([]);


конст handleDisplayData = () => {
 повторно извличане ();
 setProductsData (данни?.продукти);
 };
връщане (
"продукт-контейнер">

Този код демонстрира React компонент, който използва куката useGetAllProductsQuery, предоставена от API среза, за извличане на данни от посочената крайна точка на API.

Когато потребителят щракне върху бутона Display Data, функцията handleDisplayData се изпълнява, като изпраща HTTP заявка към API за извличане на данни за продукта. След като отговорът бъде получен, променливата с данни за продуктите се актуализира с данните за отговора. Накрая компонентът изобразява списък с подробности за продукта.

Актуализирайте компонента на приложението

Направете следните промени в кода във файла App.js:

импортиране"./App.css";
импортиране { Данни } от"./components/Data";
импортиране { магазин } от"./магазин";
импортиране { Доставчик } от"react-redux";
импортиране {ApiProvider} от"@reduxjs/toolkit/query/react";
импортиране {productApi} от"./features/apiSlice";
функцияПриложение() {
връщане (


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

 </div>
 </ApiProvider>
 </Provider>
 );
}
износпо подразбиране Приложение;

Този код обвива компонента Data с два доставчика. Тези два доставчика предоставят достъп на компонента до функциите Redux store и RTK Query, позволявайки му да извлича и показва данни от API.

Лесно е да конфигурирате Redux Toolkit Query за ефективно извличане на данни от определен източник с минимален код. Освен това можете също да включите функции за модифициране на съхранени данни чрез дефиниране на крайни точки на мутация в компонента на API срез.

Чрез комбиниране на функциите на Redux със способностите на RTK за извличане на данни можете да получите цялостно решение за управление на състоянието за вашите уеб приложения на React.