Налаштування 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 (без RTK) | Redux Toolkit |
|---|---|---|
| Створення actions | { type: 'cart/ADD_ITEM', payload } вручну |
cartSlice.actions.addItem(payload) |
| Імутабельність | Вручну (spread operator) | Через Immer — мутації в reducers допустимі |
| Thunk | redux-thunk окремо |
createAsyncThunk вбудований |
| Селектори | reselect окремо |
createSelector вбудований |
| Серверні дані | Самописний код | RTK Query вбудований |
| Конфігурація store | 20+ рядків boilerplate | configureStore з одного виклику |
Офіційна документація Redux Toolkit підтверджує, що RTK — рекомендований підхід.
Як RTK Query спрощує роботу з API?
RTK Query генерує хуки для запитів, кешує дані та підтримує оптимістичні оновлення. Порівняйте: при ручному підході потрібно писати useEffect, обробляти стани завантаження та помилки, синхронізувати з Redux. RTK Query робить це за вас, а система тегів дозволяє точково інвалідувати кеш. В результаті обсяг коду для роботи з API скорочується в 2 рази — RTK Query ефективніший за ручний fetch.
| Підхід | Обсяг коду | Кешування | Оптимістичні оновлення |
|---|---|---|---|
| fetch + useEffect | Високий | Вручну | Складно |
| RTK Query | Низький | Автоматично | Вбудовано |
Покрокове налаштування RTK Query
- Визначте базовий URL та заголовки в
fetchBaseQuery. - Створіть API за допомогою
createApi, вкажітьreducerPath,tagTypesта endpoints. - Генеруйте хуки —
useListProductsQueryтаuseCreateProductMutationготові до використання. - Додайте 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. Ми також надаємо документацію угод щодо найменування та підтримуємо інтеграцію через код-рев'ю.
Типові помилки при налаштуванні RTK
- Неправильна типізація екшнів у extraReducers (використовуйте
builder.addCase). - Забувають додавати middleware RTK Query у
configureStore. - Занадто часті інвалідації тегів (використовуйте
providesTagsз розумом). - Відсутність обробки помилок у
createAsyncThunk(використовуйтеrejectWithValue).
Якщо вам потрібне налаштування Redux Toolkit під ваш проект — зв'яжіться з нами, ми оцінимо задачу та запропонуємо оптимальне рішення.
Строки реалізації
- Налаштування store, feature-slices для основних доменів, типізація — 1 тиждень.
- RTK Query endpoints, інтеграція з компонентами, оптимістичні оновлення — 1 тиждень.
- Middleware (error handling, analytics), мемоізовані селектори — 1 тиждень.
- Unit-тести reducers та selectors, документація угод щодо найменування actions — 1 тиждень.