State Management (NgRx) Setup for Angular Application

Setting Up State Management (NgRx) for Angular Application

NgRx brings Redux pattern to Angular with RxJS observables. Actions, reducers, effects, and selectors. Powerful for complex applications but requires understanding of functional reactive programming.

What's Involved

Setting up NgRx store, defining actions and reducers, async effects, selectors, devtools integration, testing.

Installation

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

Basic Store

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)
  }))
)

Usage in components:

@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 }))
  }
}

Timeline

Basic NgRx setup — 2–3 hours. Full store with effects — 1 day. Complex feature state — 3–5 days.