State Management with RxJS in Angular

Managing state in Angular applications can be challenging, especially as your app grows. RxJS provides a powerful way to handle component state reactively, while NgRx offers a robust solution for global state management.

In this guide, we’ll explore:

• Using RxJS for managing component state
• Introduction to NgRx for global state management

1. Using RxJS for Managing Component State

For small to medium-sized applications, using RxJS Subjects for state management within a component or service is an efficient approach.

Example: Managing a Counter State with RxJS

Step 1: Create a Counter Service

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class CounterService {
  private counterSubject = new BehaviorSubject<number>(0);
  counter$ = this.counterSubject.asObservable(); // Expose as Observable

  increment() {
    this.counterSubject.next(this.counterSubject.value + 1);
  }

  decrement() {
    this.counterSubject.next(this.counterSubject.value - 1);
  }
}
    

Step 2: Use the Service in a Component

import { Component } from '@angular/core';
import { CounterService } from '../counter.service';

@Component({
  selector: 'app-counter',
  template: `
    <h1>Counter: {{ counter }}</h1>
    <button (click)="increment()">+</button>
    <button (click)="decrement()">-</button>
  `
})
export class CounterComponent {
  counter: number = 0;

  constructor(private counterService: CounterService) {
    this.counterService.counter$.subscribe(value => {
      this.counter = value;
    });
  }

  increment() {
    this.counterService.increment();
  }

  decrement() {
    this.counterService.decrement();
  }
}
    

Why Use RxJS for Component State?

• Real-time updates: Components automatically react to state changes.
• Better separation of concerns: Business logic stays in a service.
• Lightweight: No need for additional libraries.

2. Introduction to NgRx for Global State Management

When your application grows, managing state across multiple components and modules becomes complex. NgRx is a powerful Redux-inspired state management solution that works well for large Angular applications.

NgRx Key Concepts

Concept	Description
Store	A global state container.
Actions	Events that describe state changes.
Reducers	Functions that handle state changes based on actions.
Selectors	Functions to retrieve specific slices of state.
Effects	Handles side effects like API calls.

Example: Global Counter State with NgRx

Step 1: Install NgRx

ng add @ngrx/store
ng add @ngrx/effects
    

Step 2: Create Counter Actions (counter.actions.ts)

import { createAction } from '@ngrx/store';

export const increment = createAction('[Counter] Increment');
export const decrement = createAction('[Counter] Decrement');
    

Step 3: Create Counter Reducer (counter.reducer.ts)

import { createReducer, on } from '@ngrx/store';
import { increment, decrement } from './counter.actions';

export const initialState = 0;

const _counterReducer = createReducer(
  initialState,
  on(increment, (state) => state + 1),
  on(decrement, (state) => state - 1)
);

export function counterReducer(state: any, action: any) {
  return _counterReducer(state, action);
}
    

Step 4: Register Store in App Module (app.module.ts)

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { StoreModule } from '@ngrx/store';
import { counterReducer } from './counter.reducer';

@NgModule({
  imports: [BrowserModule, StoreModule.forRoot({ counter: counterReducer })],
  declarations: [],
  bootstrap: []
})
export class AppModule {}
    

Step 5: Access State in Component (counter.component.ts)

import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { increment, decrement } from './counter.actions';

@Component({
  selector: 'app-counter',
  template: `
    <h1>Counter: {{ counter$ | async }}</h1>
    <button (click)="increment()">+</button>
    <button (click)="decrement()">-</button>
  `
})
export class CounterComponent {
  counter$ = this.store.select('counter');

  constructor(private store: Store<{ counter: number }>) {}

  increment() {
    this.store.dispatch(increment());
  }

  decrement() {
    this.store.dispatch(decrement());
  }
}
    

RxJS vs. NgRx: When to Use What?

Feature	RxJS State Management	NgRx Global State Management
Best For	Small to medium components	Large applications
Complexity	Simple	More structured
Performance	Lightweight	More overhead
Use Case	Local state (e.g., form state, UI state)	Global state (e.g., user authentication, app-wide settings)

Conclusion

RxJS is great for local component state, where changes need to be reactive and limited to a specific feature.
NgRx is best for managing global application state, ensuring scalability and maintainability.

By using the right state management technique, you can build high-performance, scalable Angular applications.