Налаштування State Management (NgRx) для Angular-застосунку

Настройка State Management (NgRx) для Angular-додатку

NgRx приносить Redux pattern в Angular з RxJS observables. Екшни, редюсери, ефекти та селектори. Потужна для складних додатків, але потребує розуміння функціонального реактивного програмування.

Що входить у роботу

Настройка NgRx сторів, визначення екшнів та редюсерів, async ефекти, селектори, інтеграція devtools, тестування.

Встановлення

npm install @ngrx/store @ngrx/effects @ngrx/store-devtools
npm install @ngrx/schematics --save-dev

Базовий стор

import { createAction, props, createReducer, on } from '@ngrx/store'

export const addToCart = createAction(
  '[Cart] Add Item',
  props<{ item: CartItem }>()
)

export const removeFromCart = createAction(
  '[Cart] Remove Item',
  props<{ id: string }>()
)

interface CartState {
  items: CartItem[]
}

const initialState: CartState = { items: [] }

export const cartReducer = createReducer(
  initialState,
  on(addToCart, (state, { item }) => ({
    ...state,
    items: [...state.items, item]
  })),
  on(removeFromCart, (state, { id }) => ({
    ...state,
    items: state.items.filter(i => i.id !== id)
  }))
)

Використання в компонентах:

@Component({...})
export class CartComponent {
  items$ = this.store.select(selectCartItems)
  total$ = this.store.select(selectCartTotal)

  constructor(private store: Store) {}

  addItem(item: CartItem) {
    this.store.dispatch(addToCart({ item }))
  }
}

Терміни

Базова настройка NgRx — 2–3 години. Повний стор з ефектами — 1 день. Складне feature стану — 3–5 днів.