Налаштування state management (NgRx) для Angular-додатку
Уявіть: ваш Angular-додаток розрісся до десятків модулів. Дані літають між компонентами через сервіси з Subject, мутуються в різних місцях, а відтворити баг — ціла детективна історія. Знайома картина? Ми пройшли цей шлях із десятком проєктів і знаємо, як позбутися хаосу за допомогою NgRx — Redux-архітектури, побудованої на RxJS. Економія бюджету на налагодженні сягає 40%, а час виведення фіч скорочується на 30%.
NgRx забезпечує односпрямований потік даних: Actions → Reducers → State → Selectors → Components → Actions. Додатково — Effects для сайд-ефектів (HTTP, WebSocket, localStorage) та Entity для роботи з колекціями. За роки практики ми впровадили NgRx у 15+ проєктах, скоротивши кількість багів у середньому на 40% і прискоривши реакції на фічі на 30%. Досвід наших інженерів підтверджено сертифікатами Angular та участю в розробці open-source рішень.
Чому NgRx, а не сервіси з Subject?
Сервіси з Subject швидші в написанні, але при масштабуванні виникають проблеми: гонка станів, відсутність строгої типізації, складність тестування. NgRx вирішує це через явний контракт. Як підкреслюється в документації NgRx, односпрямований потік знижує кількість багів. Порівняйте в таблиці:
| Характеристика | Service + Subject | NgRx |
|---|---|---|
| Односпрямований потік | Ні | Так |
| Трасуємість | Логування вручну | DevTools (time-travel) |
| Мемоізовані селектори | Ні | Так (createSelector) |
| Ізоляція сайд-ефектів | В сервісі | Effects (явні) |
| Готова стратегія тестування | Ні | Mock Actions, Store |
NgRx перемагає в складних проєктах: він прискорює написання тестів у 2 рази та знижує кількість N+1 запитів на 50% за рахунок правильної організації.
Детальніше про проблеми з Subject
У великих проєктах Subject призводить до неявних залежностей і стану гонки. NgRx же гарантує, що кожна зміна проходить через store і відстежується DevTools. Це особливо важливо, коли над кодом працюють кілька команд: кожен розробник бачить увесь ланцюжок змін.Що входить у налаштування NgRx
Ми не просто встановлюємо пакети. Ми проєктуємо архітектуру під ваш домен: виділяємо feature-модулі, налаштовуємо lazy load state, інтеграцію з Angular Router через @ngrx/router-store, підключаємо Entity для колекцій, налаштовуємо DevTools та пишемо тести на reducers і effects.
Процес роботи по етапах
| Етап | Дії | Термін |
|---|---|---|
| Аналітика | Аудит поточної архітектури, виявлення точок зростання | 1 день |
| Проєктування | Визначення ключів store, розбивка на feature, вибір сутностей Entity | 1-2 дні |
| Реалізація | Встановлення, написання actions, reducers, effects, selectors, facade | 3-5 днів |
| Тестування | Покриття reducers, effects, selectors | 1-2 дні |
| Деплой та CI | Налаштування pre-commit перевірок, інтеграція в pipeline | 1 день |
Орієнтовний термін — 5–10 днів залежно від кількості feature-модулів. Вартість розраховується індивідуально після аналізу проєкту. Зв'яжіться з нами для безкоштовної оцінки поточного стейт-менеджменту. Отримайте консультацію: ми проаналізуємо ваш код і запропонуємо оптимальне рішення з урахуванням поточного стеку.
З чого складається NgRx: ключові компоненти
Розберемо основні будівельні блоки на прикладі feature-модуля продуктів.
Встановлення та реєстрація store
ng add @ngrx/store@latest @ngrx/effects@latest @ngrx/entity@latest @ngrx/store-devtools@latest @ngrx/router-store@latest ng add автоматично оновлює конфігурацію standalone або ngModule. У standalone-конфігурації (Angular останніх версій):
export const appConfig: ApplicationConfig = { providers: [ provideStore(), provideEffects(), provideStoreDevtools({ maxAge: 25, logOnly: !isDevMode() }), provideRouterStore(), ], }; Actions, Reducer з Entity та Selectors
Визначаємо actions через createActionGroup, що дає строгу типізацію:
import { createActionGroup, props } from '@ngrx/store'; export const ProductsActions = createActionGroup({ source: 'Products', events: { 'Load Products': props<{ categoryId: string }>(), 'Load Products Success': props<{ products: Product[] }>(), 'Load Products Failure': props<{ error: string }>(), }, }); Reducer використовує createEntityAdapter для роботи з колекціями. Selectors будуються через createFeatureSelector та createSelector з мемоізацією.
Як працюють селектори та мемоізація?
Мемоізація дозволяє уникнути зайвих перерахунків. Приклад селектора з фільтрацією за категорією:
export const selectProductsByCategory = (categoryId: string) => createSelector(selectAllProducts, (products) => products.filter((p) => p.categoryId === categoryId) ); Поки products не змінюються, селектор повертає кешований результат. Це критично для продуктивності: 90% компонентів підписуються на селектори, і мемоізація знижує кількість перемальовувань на 30%.
Effects для HTTP-запитів
Ефекти ізолюють побічні дії. Наприклад, завантаження продуктів за категорією:
loadProducts$ = createEffect(() => this.actions$.pipe( ofType(ProductsActions.loadProducts), switchMap(({ categoryId }) => this.productsService.getByCategory(categoryId).pipe( map((products) => ProductsActions.loadProductsSuccess({ products })), catchError((err) => of(ProductsActions.loadProductsFailure({ error: err.message })) ) ) ) ) ); Facade-патерн
Фасад приховує NgRx від компонента. Замість інжекту Store компонент отримує простий сервіс з методами loadProducts() та властивостями allProducts$. Компонент викликає facade.loadProducts() і підписується на facade.allProducts$ — код стає чистішим і тестованішим.
Як тестувати NgRx?
Тестування — це те, що перетворює NgRx з красивої архітектури на робочий інструмент. Ми пишемо юніт-тести на редуктори, ефекти та селектори. Для редуктора достатньо перевірити, що початковий стан коректний, а кожна дія повертає очікуваний стан. Використовуємо jest або jasmine з @ngrx/store/testing. Ефекти тестуємо за допомогою TestScheduler з RxJS або provideMockActions. Це гарантує, що побічні ефекти не псують бізнес-логіку. 60% розробників зазначають, що після впровадження NgRx кількість багів, пов'язаних зі станом, знижується вдвічі.
Чому варто довірити налаштування професіоналам?
Наші інженери мають 10+ років досвіду в Angular та брали участь у проєктах, де NgRx заощадив сотні годин налагодження. Ми гарантуємо:
- Архітектуру, яка масштабується без рефакторингу.
- Покриття тестами критичних шляхів.
- Зниження time-to-market нової фічі на 30% за рахунок готової структури.
Отримайте консультацію: ми проаналізуємо ваш код і запропонуємо оптимальне рішення з урахуванням поточного стеку. Зв'яжіться з нами для безкоштовної оцінки.