Angular State Management (RxJS, NgRx)

1. Understanding State Management in Angular

State management refers to handling application data consistently across components. In Angular, the state can be:

Local State – Managed within a single component using @Input() and @Output().
Shared State – Shared between multiple components using services and RxJS.
Global State – Managed across the entire application using NgRx (Redux pattern).

2. Using RxJS for Local State Management

RxJS provides BehaviorSubject, which helps manage state reactively.

Create a Service for State Management

Run:

ng generate service state

Modify state.service.ts:

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

@Injectable({
  providedIn: 'root',
})
export class StateService {
  private stateSource = new BehaviorSubject<string>('Initial State');
  currentState = this.stateSource.asObservable();

  updateState(newState: string) {
    this.stateSource.next(newState);
  }
}

Use the Service in a Component

Modify app.component.ts:

import { Component } from '@angular/core';
import { StateService } from './state.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  currentState!: string;

  constructor(private stateService: StateService) {}

  ngOnInit() {
    this.stateService.currentState.subscribe((state) => {
      this.currentState = state;
    });
  }

  changeState() {
    this.stateService.updateState('Updated State');
  }
}

Modify app.component.html:

<h2>State: {{ currentState }}</h2>
<button (click)="changeState()">Update State</button>

3. Using NgRx for Global State Management

NgRx is a Redux-inspired library for managing state in Angular applications.

Install NgRx

Run:

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

Define the State and Actions

Modify app.state.ts:

export interface AppState {
  message: string;
}

Modify app.actions.ts:

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

export const updateMessage = createAction(
  '[App] Update Message',
  props<{ message: string }>()
);

Create Reducer

Modify app.reducer.ts:

import { createReducer, on } from '@ngrx/store';
import { updateMessage } from './app.actions';

export const initialState = { message: 'Initial NgRx State' };

const _appReducer = createReducer(
  initialState,
  on(updateMessage, (state, { message }) => ({ ...state, message }))
);

export function appReducer(state: any, action: any) {
  return _appReducer(state, action);
}

Register Store in `app.module.ts`

Modify app.module.ts:

import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { updateMessage } from './app.actions';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  message$ = this.store.select((state) => state.app.message);

  constructor(private store: Store) {}

  updateMessage() {
    this.store.dispatch(updateMessage({ message: 'Updated NgRx State' }));
  }
}

Use Store in a Component