В мире современной веб-разработки эффективность извлечения и кэширования данных имеет решающее значение для обеспечения бесперебойной работы пользователей. Redux Toolkit Query (RTK Query) — это мощная библиотека выборки и кэширования данных, которая прекрасно работает с Redux Toolkit и React. В этой статье мы рассмотрим три ключевых метода, предоставляемых RTK Query: Refetch, ReCall и Refresh. Эти методы помогут вам оптимизировать процесс получения данных, обрабатывать обновления и поддерживать актуальность данных вашего приложения.

Обновление.
Иногда вам может потребоваться обновить данные, чтобы убедиться в наличии последних обновлений с сервера. RTK Query упрощает получение данных для определенной конечной точки. Допустим, у нас есть конечная точка users, которая получает список пользователей. Чтобы повторно получить данные, вы можете просто вызвать функцию refetch, предоставляемую RTK Query:

import { useQuery } from '@reduxjs/toolkit/query/react';
// ...
const { data, isLoading, refetch } = useQuery('users', getUsers);
// ...
<button onClick={() => refetch()}>Refetch Users</button>

В приведенном выше примере функция refetch()запускает новый запрос к серверу и обновляет переменную dataпоследним ответом.

ReCall:
Функция ReCall RTK Query позволяет вызывать данные из кэша без выполнения сетевого запроса. Это особенно полезно, если вы хотите мгновенно отображать кэшированные данные, одновременно получая свежие данные в фоновом режиме. Чтобы вызвать данные из кэша, вы можете использовать флаги isFetchingи isFetchingMore, предоставляемые RTK-запросом:

import { useQuery } from '@reduxjs/toolkit/query/react';
// ...
const { data, isFetching, isFetchingMore } = useQuery('users', getUsers);
// ...
if (isFetching) {
  // Render a loading state
} else {
  // Render the cached data
}

В приведенном выше примере флаг isFetchingуказывает, извлекаются ли в данный момент данные с сервера, а флаг isFetchingMoreуказывает, выполняется ли разбиение на страницы дополнительных данных. Вы можете использовать эти флаги для условной визуализации состояний загрузки или мгновенного отображения кэшированных данных.

Обновление.
Функция обновления в RTK Query позволяет вручную обновлять данные в кэше, сохраняя при этом синхронизацию пользовательского интерфейса. Допустим, у нас есть мутация данных, которая обновляет профиль пользователя. После успешной мутации вы можете использовать функцию invalidateQueries, предоставляемую RTK Query, для обновления связанных данных:

import { useMutation, useQueryClient } from '@reduxjs/toolkit/query/react';
// ...
const queryClient = useQueryClient();
const updateUser = useMutation(updateUserAPI, {
  onSuccess: () => {
    queryClient.invalidateQueries('users');
  },
});
// ...
<button onClick={() => updateUser.mutate()}>Update User</button>

В приведенном выше примере вызов функции invalidateQueries('users')сообщает RTK Query аннулировать и повторно загрузить запрос «пользователи» после успешного изменения. Это гарантирует, что обновленные пользовательские данные будут получены и отображены правильно.

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