С момента своего первого релиза в 2015 году Redux использовался и продолжает использоваться на множестве клиентских приложений. Несмотря на все достоинства, которые предоставляет данное решение (предсказуемое управление состоянием, удобная отладка с помощью Redux DevTools и др.), некоторые разработчики сетуют на излишнее количество “шаблонного кода” при реализации даже самого просто функционала и предпочитают альтернативные инструменты для управления состоянием в клиентских приложениях.
Чтобы избежать чрезмерного количества кода при работе с Redux, разработчики применяли различные соглашения (например, ducks-modular-redux), а также создавали свои решения, представляющие собой абстрактный слой над Redux’ом (например, redux-crud, свои оболочки над библиотекой и прочее).
В конце концов, авторы Redux выпустили свое решение под названием Redux Toolkit, позволяющее минимизировать описанные выше проблемы и которое было тепло встречено разработчиками. Также в состав данной библиотеки было включено решение под названием RTK Query, которое призвано упростить работу с API, а также с кэшированием данных.
Получение данных с сервера и последующая их визуализация – типовые задачи веб-приложений. Как правило, веб-приложения также вносят изменения в эти данные, отправляют измененные данные на сервер, хранят закэшированные данные на клиенте и при необходимости обновляют их. Помимо этого, они также выполняют множество других задач, например:
Отображение статуса загрузки на UI (Spinners)
Дедубликация запросов
Оптимистические обновления UI
Контроль кэша приложения по мере взаимодействия пользователя с 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 сервера и эндпоинты, с которым нужно будет взаимодействовать.
Определим три главных параметра:
reducerPath. Уникальный ключ, который будет добавлен в store
baseQuery. Параметр baseQuery отвечает за непосредственное взаимодействие с API. В состав RTK Query входит инструмент под названием fetchBaseQuery, представляющий собой легковесную обертку над fetch, подходящий для большинства операций по работе с API
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:
getFilms. Получение списка всех фильмов;
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 и другие.
Выводы
Теперь не приходится создавать action creators для каждого запроса
Нет нужды создавать множество reducers
Обработка состояний запросов (isFetching, isError и др.) теперь производится автоматически
В React компонентах не нужно вызывать метод dispatch или использовать селекторы для взаимодействия со store
В результате количество написанного кода становится меньше, а его восприятие заметно улучшилось.