Как мы используем RTK Query в React-приложениях

С момента своего первого релиза в 2015 году Redux использовался и продолжает использоваться на множестве клиентских приложений. Несмотря на все достоинства, которые предоставляет данное решение (предсказуемое управление состоянием, удобная отладка с помощью Redux DevTools и др.), некоторые разработчики сетуют на излишнее количество “шаблонного кода” при реализации даже самого просто функционала и предпочитают альтернативные инструменты для управления состоянием в клиентских приложениях.  

Чтобы избежать чрезмерного количества кода при работе с Redux, разработчики применяли различные соглашения (например, ducks-modular-redux), а также создавали свои решения, представляющие собой абстрактный слой над Redux’ом (например, redux-crud, свои оболочки над библиотекой и прочее).   

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

Получение данных с сервера и последующая их визуализация – типовые задачи веб-приложений. Как правило, веб-приложения также вносят изменения в эти данные, отправляют измененные данные на сервер, хранят закэшированные данные на клиенте и при необходимости обновляют их. Помимо этого, они также выполняют множество других задач, например:  

1. Отображение статуса загрузки на UI (Spinners) 

2. Дедубликация запросов 

3. Оптимистические обновления UI  

4. Контроль кэша приложения по мере взаимодействия пользователя с UI  

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

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

Подход, используемый в RTK Query, был вдохновлен такими решениями, как Apollo Client, React Query и другими.  

Ключевые особенности RTK Query:

• RTK Query представляет собой абстракцию над Redux Toolkit. Под капотом он использует createSlice и createAsyncThunk, которые предоставляет API Redux Toolkit. 

• В RTQ Query взаимодействие с API задается с помощью endpoint, которые определены в момент инициализации API (метод createApi, о котором пойдет речь ниже), в отличии от решений, подобных React Query или SWR. 

• RTK Query автоматически создает хуки, исходя из заданных эндпоинтов. Данные хуки могут быть использованы непосредственно в React компонентах для загрузки/отображения/изменения данных. Механизм взаимодействия с API инкапсулирован. 

• RTK Query поддерживает кэширование из коробки. 

• Позволяет решить проблему дедубликации запросов, например, если два компонента на одной странице совершают один и тот же запрос к API, выполнен будет лишь один запрос.  

RTK Query на практике  

Если Redux Toolkit установлен в вашем приложении, RTK Query уже доступен, т. к. он входит в состав Redux Toolkit.  

Шаг 1: создание API Slice 

Начнем с создания с так называемого “API Slice”, в котором определим базовый URL сервера и эндпоинты, с которым нужно будет взаимодействовать.  

Определим три главных параметра:  

1. reducerPath. Уникальный ключ, который будет добавлен в store

2. baseQuery. Параметр baseQuery отвечает за непосредственное взаимодействие с API. В состав RTK Query входит инструмент под названием fetchBaseQuery, представляющий собой легковесную обертку над fetch, подходящий для большинства операций по работе с API

3. endPoints. Это набор взаимодействий с API. Существует два вида endpoint: query и mutation 

// Need to use the React-specific entry point to import createApi   import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'      // Define a service using a base URL and expected endpoints   export const starWarsApi = createApi({     reducerPath: 'starWars',     baseQuery: fetchBaseQuery({ baseUrl: "https://swapi.dev/api" }),     endpoints: (builder) => ({       // Define endpoints here     })   }) 

В примере выше в качестве baseUrl мы использовали популярный Star Wars API.  

Шаг 2: добавление endpoints в API Slice 

Как было указано выше, существует два вида endpoint: query и mutation. Зададим два query endpoint’а:  

endpoints: (builder) => ({    getFilms: builder.query({        query: () => `/films?format=json`     }),    getFilmById: builder.query({      query: (filmId) => `/films/${filmId}?format=json`     })   }) 

В коде выше были добавлены два endpoint: 

1. getFilms. Получение списка всех фильмов; 

2. getFilmById. Получение одного фильма по его ID. В данном случае filmId представляет собой query параметр; при необходимости набор параметров можно расширить.  

Шаг 3: Экспорт сгенерированных хуков  

Самое интересное начинается здесь. Для каждого endpoint, объявленного выше, RTK Query автоматически генерирует хуки, которые могут быть использован в React компонентах для загрузки/изменения данных. Рассмотрим это на следующем примере: 

Как видно на изображении, starWarsApi после инициализации содержит в себе сгенерированные хуки. В зависимости от типов endpoint, название хуков будет содержать в себе либо query, либо mutation.  

Это просто, не так ли?  

Финальная версия Star Wars API Slice выглядит следующим образом:  

// Need to use the React-specific entry point to import createApi   import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'      // Define a service using a base URL and expected endpoints   export const starWarsApi = createApi({     reducerPath: 'starWars',     baseQuery: fetchBaseQuery({ baseUrl: "https://swapi.dev/api" }),     endpoints: (builder) => ({       getFilms: builder.query({         query: () => `/films?format=json`       }),       getFilmById: builder.query({         query: (filmId) => `/films/${filmId}?format=json`       })     }),   })      // Export hooks for usage in functional components, which are   // auto-generated based on the defined endpoints   export const { useGetFilmsQuery, useGetFilmByIdQuery } = starWarsApi   

Шаг 4: добавление API сервиса в Redux store  

Метод createApi генерирует reducer, который должен быть добавлен в store. Также для обеспечения возможностей RTK Query (кэширование, инвалидация, polling и др.) необходимо добавить middleware как на примере ниже:  

import { configureStore } from '@reduxjs/toolkit'   import { setupListeners } from '@reduxjs/toolkit/query'   import { starWarsApi } from './services/starWarsApi'      export const store = configureStore({     reducer: {       // Add the generated reducer as a specific top-level slice       [starWarsApi.reducerPath]: starWarsApi.reducer,     },     // Adding the api middleware enables caching, invalidation, polling,     // and other useful features of `rtk-query`.     middleware: (getDefaultMiddleware) =>       getDefaultMiddleware().concat(starWarsApi.middleware),   })      // optional, but required for refetchOnFocus/refetchOnReconnect behaviors   // see `setupListeners` docs - takes an optional callback as the 2nd arg for customization   setupListeners(store.dispatch) 

Настройка на этом завершена. Далее рассмотрим использование сгенерированных хуков в React компонентах.  

Шаг 5: использование RTK Query хуков в компонентах  

import { useGetFilmsQuery } from '../reduxStore/services/starWarsApi';      const FilmsList = () => {     const { data, isLoading, error } = useGetFilmsQuery();        return (       <div>         <h3>Star Wars Movies</h3>         {error ? (           <>Oh no, there was an error</>         ) : isLoading ? (           <>Loading...</>         ) : data ? (           <div>             {data.results.map(movie => (               <section item key={movie.episode_id} xs={4}>                 <h2>{movie.title}</h2>                 <p>{movie.opening_crawl}</p>               </section>             ))}           </div>         ) : null}       </div>     )   }      export default FilmsList; 

Рассмотрим описанный код выше: 

• Сначала мы просто импортировали хук useGetFilmsQuery 

• При вызове хука useGetFilmsQuery будет автоматически производиться вызов к API для получения всех фильмов. Хук в свою очередь возвращает не только вышеуказанные значения, но и также ряд других полезных, таких как isFetching,  isError и другие. 

Выводы

1. Теперь не приходится создавать action creators для каждого запроса 

2. Нет нужды создавать множество reducers 

3. Обработка состояний запросов (isFetching, isError и др.) теперь производится автоматически 

4. В React компонентах не нужно вызывать метод dispatch или использовать селекторы для взаимодействия со store  

В результате количество написанного кода становится меньше, а его восприятие заметно улучшилось.