Зависимости и требования к проекту

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

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

Базовые требования к окружению

RTK Query ориентирован на современную Javascript-инфраструктуру. Минимальные требования зависят от используемого сборщика, версии React и конфигурации проекта.

Основные требования

Компонент Рекомендуемая версия
Node.js 16+
npm 8+
React 18+
Redux Toolkit 2+
Redux 5+
Typescript 5+ (при использовании TS)

RTK Query официально поддерживает:

  • React
  • React Native
  • Next.js
  • Vite
  • Webpack
  • SSR-окружения
  • CSR-приложения
  • Hybrid Rendering

Основные зависимости проекта

Установка Redux Toolkit

RTK Query встроен внутрь Redux Toolkit и не требует отдельного пакета.

Установка:

npm install @reduxjs/toolkit

или:

yarn add @reduxjs/toolkit

После установки становятся доступны:

  • configureStore
  • createSlice
  • createAsyncThunk
  • createApi
  • fetchBaseQuery

Установка React Redux

Для интеграции RTK Query с React требуется библиотека React Redux.

Установка:

npm install react-redux

или:

yarn add react-redux

Без React Redux невозможно:

  • подключить Provider
  • использовать generated hooks
  • работать с Redux Store внутри компонентов

Минимальный набор зависимостей

Для React-проекта обычно достаточно:

npm install @reduxjs/toolkit react-redux

RTK Query уже находится внутри Redux Toolkit:

import { createApi } from '@reduxjs/toolkit/query/react'

Отдельный пакет устанавливать не требуется.

Разница между query и query/react

RTK Query имеет два основных entry point:

Базовый вариант

import { createApi } from '@reduxjs/toolkit/query'

Используется:

  • без React
  • в Node.js
  • в чистом Redux
  • в серверных приложениях

React-вариант

import { createApi } from '@reduxjs/toolkit/query/react'

Дополнительно генерирует:

  • React hooks
  • useQuery
  • useMutation
  • useLazyQuery
  • usePrefetch

Именно этот вариант используется в большинстве React-приложений.

Поддержка fetch API

RTK Query по умолчанию использует fetchBaseQuery, основанный на Fetch API.

Пример:

import { fetchBaseQuery } from '@reduxjs/toolkit/query/react'

Следовательно, окружение должно поддерживать:

  • fetch
  • Request
  • Response
  • Headers
  • AbortController

Требования браузеров

RTK Query корректно работает во всех современных браузерах:

Браузер Поддержка
Chrome Полная
Firefox Полная
Edge Полная
Safari Полная

Проблемы возникают в:

  • Internet Explorer
  • старых Android WebView
  • устаревших встроенных браузерах

Polyfill для fetch

Если Fetch API отсутствует, требуется polyfill.

Популярные варианты:

cross-fetch

npm install cross-fetch

whatwg-fetch

npm install whatwg-fetch

Использование fetch polyfill

Пример:

import 'cross-fetch/polyfill'

или:

import 'whatwg-fetch'

После этого fetchBaseQuery сможет работать в старых окружениях.

Требования для AbortController

RTK Query активно использует отмену запросов.

Пример внутренних механизмов:

signal.abort()

Поэтому окружение обязано поддерживать:

AbortController

Для старых браузеров может понадобиться polyfill:

npm install abortcontroller-polyfill

Настройка Babel

Для старых браузеров проект обычно использует Babel.

Минимальная конфигурация:

{
  presets: ['@babel/preset-env']
}

Для React:

{
  presets: [
    '@babel/preset-env',
    '@babel/preset-react'
  ]
}

Требования к Typescript

RTK Query глубоко интегрирован с Typescript.

Рекомендуемые параметры:

{
  "compilerOptions": {
    "strict": true,
    "moduleResolution": "node",
    "esModuleInterop": true
  }
}

Почему strict mode особенно важен

RTK Query активно использует:

  • generic types
  • inference
  • mapped types
  • conditional types

Без strict mode появляются:

  • потеря типизации
  • any leakage
  • некорректный infer
  • проблемы generated hooks

Поддержка ESM и CommonJS

RTK Query поддерживает:

Формат Поддержка
ESM Да
CommonJS Да

Современные сборщики предпочитают ESM.

Требования Vite

Для Vite достаточно стандартной конфигурации.

Установка:

npm install vite

React-шаблон:

npm create vite@latest

RTK Query полностью совместим с:

  • HMR
  • code splitting
  • lazy loading
  • dynamic imports

Требования Webpack

Минимально рекомендуется:

Компонент Версия
webpack 5+
babel-loader 9+

RTK Query корректно работает с:

  • tree shaking
  • chunk splitting
  • dynamic imports

Требования Next.js

RTK Query поддерживает:

  • SSR
  • SSG
  • ISR
  • CSR

Минимально рекомендуется:

npm install next react react-dom

Дополнительно:

npm install react-redux @reduxjs/toolkit

SSR и особенности зависимостей

Для SSR важно учитывать:

  • отсутствие window
  • отсутствие localStorage
  • различия fetch между сервером и браузером

Иногда требуется node-fetch:

npm install node-fetch

Поддержка React Native

RTK Query работает в React Native благодаря встроенному fetch.

Требуются:

npm install @reduxjs/toolkit react-redux

Дополнительных HTTP-клиентов обычно не требуется.

Нужен ли Axios

RTK Query не требует Axios.

По умолчанию используется:

fetchBaseQuery

Однако Axios может применяться:

  • для legacy API
  • кастомных interceptors
  • upload progress
  • сложной авторизации

Установка Axios

При необходимости:

npm install axios

Использование Axios внутри RTK Query

Пример кастомного baseQuery:

const axiosBaseQuery =
  ({ baseUrl } = { baseUrl: '' }) =>
  async ({ url, method, data, params }) => {
    try {
      const result = await axios({
        url: baseUrl + url,
        method,
        data,
        params,
      })

      return { data: result.data }
    } catch (axiosError) {
      return {
        error: {
          status: axiosError.response?.status,
          data: axiosError.response?.data,
        },
      }
    }
  }

Peer Dependencies

Основные peer dependencies:

Пакет Назначение
react UI
react-dom DOM rendering
react-redux интеграция Redux
redux store

Проверка установленных версий

Команда:

npm list

или:

npm ls @reduxjs/toolkit

Проверка конфликтов зависимостей

Особенно важно избегать:

  • нескольких версий redux
  • нескольких версий react
  • старых react-redux

Типичная проблема:

Invalid hook call

Причина часто связана с дублирующимся React.

Рекомендуемая структура package.json

Пример:

{
  "dependencies": {
    "@reduxjs/toolkit": "^2.2.0",
    "react": "^18.3.0",
    "react-dom": "^18.3.0",
    "react-redux": "^9.1.0"
  }
}

Dev Dependencies

Часто используются:

{
  "devDependencies": {
    "typescript": "^5.5.0",
    "eslint": "^9.0.0",
    "prettier": "^3.0.0"
  }
}

Совместимость с ESLint

RTK Query не требует специальных ESLint-плагинов.

Но полезны:

npm install eslint-plugin-react-hooks

и:

npm install @typescript-eslint/eslint-plugin

Требования к React Strict Mode

React 18 StrictMode вызывает двойной mount в development.

Это влияет на:

  • query lifecycle
  • refetch
  • cache subscriptions

Пример:

<React.StrictMode>
  <App />
</React.StrictMode>

RTK Query корректно поддерживает StrictMode.

Требования к Redux Store

Store обязательно должен:

  • содержать reducer API
  • подключать middleware RTK Query

Минимальная конфигурация:

import { configureStore } from '@reduxjs/toolkit'
import { api } from './api'

export const store = configureStore({
  reducer: {
    [api.reducerPath]: api.reducer,
  },

  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(api.middleware),
})

Почему middleware обязателен

Middleware отвечает за:

  • кэширование
  • polling
  • invalidation
  • refetch
  • deduplication
  • lifecycle events
  • subscriptions

Без middleware RTK Query работать не будет.

Требования к сериализации

Redux Toolkit по умолчанию включает serializableCheck.

RTK Query старается хранить сериализуемые данные.

Нежелательно помещать в cache:

  • Date instances
  • Map
  • Set
  • class instances
  • DOM nodes
  • functions

Ограничения Immutable Middleware

RTK Query использует иммутабельный state.

Запрещены:

state.user.name = 'John'

Разрешено:

return {
  ...state,
  user: {
    ...state.user,
    name: 'John'
  }
}

Хотя Immer внутри Redux Toolkit автоматизирует этот процесс, понимание ограничений остаётся важным.

Требования к сетевому API

RTK Query рассчитан на HTTP API:

Тип API Поддержка
REST Отлично
GraphQL Через custom baseQuery
gRPC Ограниченно
WebSocket Частично

GraphQL зависимости

Для GraphQL часто используют:

npm install graphql-request

или:

npm install @apollo/client graphql

Хотя RTK Query может работать и без Apollo.

Работа с WebSocket

RTK Query не заменяет WebSocket-клиент.

Обычно дополнительно используются:

npm install socket.io-client

или:

npm install ws

Code Splitting и динамические зависимости

RTK Query поддерживает injectEndpoints.

Это позволяет:

  • лениво подключать API
  • уменьшать bundle size
  • разделять модули

Особенно полезно в:

  • enterprise приложениях
  • microfrontend архитектуре
  • больших SPA

Требования к производительности

RTK Query рассчитан на:

  • минимизацию запросов
  • deduplication
  • автоматический cache reuse
  • batching subscriptions

Однако проект должен избегать:

  • огромных normalized cache
  • хранения гигантских payload
  • бесконечных polling intervals

Ограничения Memory Usage

Большое количество cache entries может приводить к:

  • росту памяти
  • утечкам подписок
  • увеличению времени garbage collection

Для контроля используются:

keepUnusedDataFor

и:

refetchOnMountOrArgChange

Рекомендуемая архитектура зависимостей

Часто используется следующий стек:

npm install \
@reduxjs/toolkit \
react-redux \
react \
react-dom

Дополнительно:

npm install axios
npm install zod
npm install graphql-request
npm install socket.io-client

Но эти библиотеки являются опциональными и зависят от архитектуры проекта.

Оглавление