RTK Query: мощный инструмент выборки данных для приложений React

React — это популярная библиотека JavaScript для создания пользовательских интерфейсов, которая часто используется для создания одностраничных приложений. Одной из проблем создания приложения React является получение данных из API и управление полученным состоянием. Здесь на помощь приходит RTK Query.

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

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

Начиная

Прежде чем мы углубимся в код, нам нужно настроить приложение React с RTK Query. Для этого мы можем использовать инструмент create-react-app и пакет @reduxjs/toolkit:

npx create-react-app my-app
cd my-app
npm install @reduxjs/toolkit

Далее мы можем установить RTK Query:

npm install @rtk-incubator/rtk-query

Теперь мы готовы начать использовать RTK Query в нашем приложении.

Получение данных

Чтобы получить данные с помощью RTK Query, нам сначала нужно определить срез API. Фрагмент API — это набор определений конечных точек, которые описывают, как извлекать данные из API. Вот пример:

import { createApi, fetchBaseQuery } from '@rtk-incubator/rtk-query';

export const api = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: 'https://your-url.com' }),
  endpoints: (builder) => ({
    getUsers: builder.query({
      query: () => '/users',
    }),
  }),
});

В этом примере мы определили одну конечную точку с именем getUsers. Функция query описывает, как получать данные из API. В данном случае мы извлекаем данные из конечной точки /users.

Далее нам нужно использовать этот фрагмент API в нашем компоненте React. Вот пример:

import React, { useEffect } from 'react';
import { useGetUsersQuery } from './api';

function Users() {
  const { data, error, isLoading } = useGetUsersQuery();

  useEffect(() => {
    console.log(data);
  }, [data]);

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <div>
      {data.map((user) => (
        <div key={user.id}>
          <h2>{user.name}</h2>
          <p>{user.email}</p>
        </div>
      ))}
    </div>
  );
}

export default Users;

В этом примере мы используем хук useGetUsersQuery, предоставляемый RTK Query, для получения данных из API. Переменные data, error и isLoading представляют состояние вызова API. Мы используем хук useEffect для записи данных в консоль при их изменении.

Если данные все еще загружаются, мы отображаем сообщение «Загрузка…». Если произошла ошибка, мы показываем сообщение об ошибке. В противном случае мы отображаем список пользователей.

Кэширование данных

Одной из ключевых особенностей RTK Query является возможность кэширования данных. Это может повысить производительность за счет уменьшения количества необходимых вызовов API.

Чтобы включить кэширование, нам нужно определить поведение кэша для нашего фрагмента API. Вот пример:

import { createApi, fetchBaseQuery } from '@rtk-incubator/rtk-query';

export const api = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: 'https://your-api-url.com' }),
  endpoints: (builder) => ({
    getUsers: builder.query({
      query: () => '/users',
    }),
  }),
  // Define cache behavior
  refetchOnMountOrArgChange: true,
  refetchOnFocus: true,
  refetchOnReconnect: true,
});

В этом примере мы добавили три параметра поведения кэша: refetchOnMountOrArgChange, refetchOnFocus и refetchOnReconnect. Эти параметры определяют, когда RTK Query должен автоматически обновлять данные.

Мы также можем вручную обновить данные, используя функцию refetch, возвращаемую хуком useGetUsersQuery:

import React, { useEffect } from 'react';
import { useGetUsersQuery } from './api';

function Users() {
  const { data, error, isLoading, refetch } = useGetUsersQuery();

  useEffect(() => {
    console.log(data);
  }, [data]);

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return (
      <div>
        Error: {error.message}
        <button onClick={() => refetch()}>Retry</button>
      </div>
    );
  }

  return (
    <div>
      {data.map((user) => (
        <div key={user.id}>
          <h2>{user.name}</h2>
          <p>{user.email}</p>
        </div>
      ))}
      <button onClick={() => refetch()}>Refresh</button>
    </div>
  );
}

export default Users;

В этом примере мы добавляем кнопку «Повторить попытку», которая вызывает функцию refetch в случае ошибки. Мы также добавляем кнопку «Обновить», которая вручную обновляет данные.

Заключение

RTK Query — это мощный инструмент для извлечения и кэширования данных в приложениях React. Его простой API и мощные функции делают его простым в использовании и широкими возможностями настройки. Используя RTK Query, мы можем упростить логику получения данных и повысить производительность наших приложений.

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