Налаштування State Management (Redux Toolkit) для React-додатку

При розробці великого React-додатку керування станом швидко перетворюється на хаос: десятки reducer'ів, роздутий store, баги через випадкову мутацію об'єктів. У типовому проекті буває до 3000+ рядків чистого Redux. Redux Toolkit (RTK) — офіційна бібліотека, яка вирішує ці проблеми. Вона усуває надлишковий boilerplate: вбудований createSlice генерує actions та reducers автоматично, Immer під капотом робить мутації безпечними — ви змінюєте state напряму, а він залишається імутабельним. RTK Query бере на себе всю роботу з API, включаючи кешування, оптимістичні оновлення та retry з exponential backoff. За нашими даними, впровадження RTK скорочує обсяг коду керування станом на 50% та зменшує кількість багів, пов'язаних зі станом, на 40%. Економія часу розробки становить до 40%, а сукупна вартість володіння (TCO) знижується на 30%.

Ми маємо досвід понад 5 років впровадження RTK у десятках проектів — від простих адмінок до великих SaaS-платформ з тисячами користувачів. Наші інженери гарантують, що після налаштування ви забудете про баги при оновленні стейту, а код буде легко підтримувати. Зв'яжіться з нами для консультації, якщо хочете позбутися boilerplate та прискорити розробку.

Як Redux Toolkit вирішує проблему boilerplate?

RTK не просто спрощує Redux, він змінює підхід до структури проекту. Замість розрізнених файлів ви використовуєте createSlice. Він генерує actions, reducers та константи автоматично. Immer під капотом робить мутації безпечними: ви змінюєте state напряму, а він залишається імутабельним. createAsyncThunk та RTK Query вирішують типові завдання за вас.

Офіційна документація Redux Toolkit підтверджує, що RTK — рекомендований підхід.

Як RTK Query спрощує роботу з API?

RTK Query генерує хуки для запитів, кешує дані та підтримує оптимістичні оновлення. Порівняйте: при ручному підході потрібно писати useEffect, обробляти стани завантаження та помилки, синхронізувати з Redux. RTK Query робить це за вас, а система тегів дозволяє точково інвалідувати кеш. В результаті обсяг коду для роботи з API скорочується в 2 рази — RTK Query ефективніший за ручний fetch.

Покрокове налаштування RTK Query

1. Визначте базовий URL та заголовки в fetchBaseQuery.
2. Створіть API за допомогою createApi, вкажіть reducerPath, tagTypes та endpoints.
3. Генеруйте хуки — useListProductsQuery та useCreateProductMutation готові до використання.
4. Додайте middleware в store та setupListeners для авто-refetch.

// features/products/productsApi.ts import { createApi, fetchBaseQuery, retry } from '@reduxjs/toolkit/query/react'; import type { RootState } from '@/store'; const baseQuery = fetchBaseQuery({ baseUrl: import.meta.env.VITE_API_URL, prepareHeaders: (headers, { getState }) => { const token = (getState() as RootState).auth.token; if (token) headers.set('Authorization', `Bearer ${token}`); return headers; }, }); // Автоматический retry с exponential backoff const baseQueryWithRetry = retry(baseQuery, { maxRetries: 2 }); export const productsApi = createApi({ reducerPath: 'productsApi', baseQuery: baseQueryWithRetry, tagTypes: ['Product', 'Category'], endpoints: (builder) => ({ listProducts: builder.query<PaginatedResponse<Product>, ProductQuery>({ query: (params) => ({ url: '/products', params }), providesTags: (result) => result ? [...result.items.map(({ id }) => ({ type: 'Product' as const, id })), 'Product'] : ['Product'], // Трансформация ответа для нормализации transformResponse: (raw: ApiResponse<Product[]>) => ({ items: raw.data, total: raw.meta.total, page: raw.meta.page, }), }), createProduct: builder.mutation<Product, CreateProductDto>({ query: (body) => ({ url: '/products', method: 'POST', body }), invalidatesTags: ['Product'], // Оптимистичное обновление async onQueryStarted(body, { dispatch, queryFulfilled }) { const patchResult = dispatch( productsApi.util.updateQueryData('listProducts', {}, (draft) => { draft.items.unshift({ id: 'temp', ...body, createdAt: new Date().toISOString() }); draft.total += 1; }) ); try { await queryFulfilled; } catch { patchResult.undo(); } }, }), }), }); export const { useListProductsQuery, useCreateProductMutation } = productsApi; 

Сучасна архітектура з RTK

• src/store/index.ts — конфігурація store
• src/store/hooks.ts — типізовані useDispatch/useSelector
• src/store/middleware/errorMiddleware.ts — обробка помилок
• src/store/middleware/analyticsMiddleware.ts — трекінг подій
• src/store/features/auth/ — authSlice, authSelectors, authThunks
• src/store/features/products/ — productsSlice, productsApi (RTK Query)
• src/store/features/ui/ — uiSlice

Feature-based структура: кожна доменна область — окрема директорія з slice, селекторами та API.

Що дає типізація слайсів та селекторів?

Типізація слайсів та селекторів — не просто формальність. Вона запобігає цілому класу помилок: передачу неправильного екшна, звернення до неіснуючого поля стейту, невідповідність типів у ред'юсерах. За допомогою TypeScript та вбудованих утиліт Redux Toolkit (PayloadAction, createAsyncThunk) ви отримуєте повну типову безпеку на всіх етапах. Це скорочує час налагодження на 30% та спрощує рефакторинг.

createSlice з Immer

// features/auth/authSlice.ts import { createSlice, createAsyncThunk, type PayloadAction } from '@reduxjs/toolkit'; interface User { id: string; email: string; role: 'admin' | 'manager' | 'viewer'; permissions: string[]; } interface AuthState { user: User | null; token: string | null; status: 'idle' | 'loading' | 'authenticated' | 'error'; error: string | null; } // createAsyncThunk генерирует pending/fulfilled/rejected actions автоматически export const login = createAsyncThunk( 'auth/login', async (credentials: { email: string; password: string }, { rejectWithValue }) => { try { const res = await fetch('/api/auth/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(credentials), }); if (!res.ok) { const err = await res.json(); return rejectWithValue(err.message); } return res.json() as Promise<{ user: User; token: string }>; } catch { return rejectWithValue('Ошибка сети'); } } ); export const authSlice = createSlice({ name: 'auth', initialState: { user: null, token: localStorage.getItem('token'), status: 'idle', error: null, } satisfies AuthState, reducers: { // Immer позволяет мутировать state напрямую — под капотом всё иммутабельно logout(state) { state.user = null; state.token = null; state.status = 'idle'; localStorage.removeItem('token'); }, updateProfile(state, action: PayloadAction<Partial<User>>) { if (state.user) { Object.assign(state.user, action.payload); } }, }, extraReducers: (builder) => { builder .addCase(login.pending, (state) => { state.status = 'loading'; state.error = null; }) .addCase(login.fulfilled, (state, action) => { state.user = action.payload.user; state.token = action.payload.token; state.status = 'authenticated'; localStorage.setItem('token', action.payload.token); }) .addCase(login.rejected, (state, action) => { state.status = 'error'; state.error = action.payload as string; }); }, }); export const { logout, updateProfile } = authSlice.actions; 

Middleware та конфігурація store

// store/middleware/errorMiddleware.ts & analyticsMiddleware.ts import type { Middleware } from '@reduxjs/toolkit'; import { isRejectedWithValue } from '@reduxjs/toolkit'; import { toast } from 'sonner'; export const errorMiddleware: Middleware = () => (next) => (action) => { if (isRejectedWithValue(action)) { const message = (action.payload as any)?.message ?? 'Неизвестная ошибка'; toast.error(message); } return next(action); }; const TRACKED_ACTIONS = ['cart/addItem', 'auth/login/fulfilled', 'order/submit/fulfilled']; export const analyticsMiddleware: Middleware = () => (next) => (action) => { if (typeof action.type === 'string' && TRACKED_ACTIONS.includes(action.type)) { window.gtag?.('event', action.type.replace(/\//g, '_'), { payload: JSON.stringify(action.payload), }); } return next(action); }; 

// store/index.ts import { configureStore } from '@reduxjs/toolkit'; import { setupListeners } from '@reduxjs/toolkit/query'; export const store = configureStore({ reducer: { auth: authSlice.reducer, cart: cartSlice.reducer, ui: uiSlice.reducer, [productsApi.reducerPath]: productsApi.reducer, }, middleware: (getDefault) => getDefault() .concat(productsApi.middleware) .concat(errorMiddleware) .concat(analyticsMiddleware), }); // Автоматический refetch при reconnect и focus setupListeners(store.dispatch); 

Отримайте консультацію по вашому проекту — ми допоможемо впровадити RTK ефективно.

Тестування reducers

Reducers — чисті функції, тестуються без React, без рендеру, без моків. Це прискорює написання тестів та підвищує їх надійність.

// features/cart/cartSlice.test.ts import { cartSlice, addItem, removeItem, selectCartTotal } from './cartSlice'; const { reducer } = cartSlice; describe('cartSlice', () => { it('добавляет новый товар', () => { const state = reducer(undefined, addItem({ id: '1', name: 'Test', price: 100, image: '' })); expect(state.items).toHaveLength(1); expect(state.items[0].qty).toBe(1); }); it('увеличивает qty для существующего товара', () => { const item = { id: '1', name: 'Test', price: 100, image: '' }; const state = [addItem(item), addItem(item)].reduce(reducer, undefined); expect(state.items[0].qty).toBe(2); }); it('корректно считает итог с купоном', () => { const rootState = { cart: { items: [{ id: '1', price: 200, qty: 2 }], couponDiscount: 10 } }; expect(selectCartTotal(rootState as any)).toBe(360); // 400 - 10% }); }); 

Обсяг робіт з налаштування RTK

Налаштування Redux Toolkit включає аудит поточної архітектури, створення типізованих feature-слайсів, налаштування RTK Query з кешуванням та оптимістичними оновленнями, інтеграцію middleware для обробки помилок та аналітики, а також unit-тестування reducers та selectors. Ми також надаємо документацію угод щодо найменування та підтримуємо інтеграцію через код-рев'ю.