When to Use NgRx in Angular: Key Guidance and Examples

Use NgRx in Angular when your app has complex state that needs to be shared across many components or when you want a clear, predictable way to manage state changes. It helps especially in large apps where state logic can get hard to track and debug.

How It Works

NgRx works like a traffic controller for your app's data. Imagine your app's state as a big city with many roads (components) that need to share information smoothly. NgRx uses a central store, like a control tower, to keep all data organized and flowing correctly.

When something changes, instead of components talking directly to each other, they send messages called actions to the store. The store then updates the state in a clear, step-by-step way using reducers. This makes it easy to see what changed and why, just like following a clear map.

Example

This example shows a simple counter using NgRx to manage its state. The counter can be incremented or decremented, and the state updates predictably through actions and reducers.

typescript

import { createAction, createReducer, on } from '@ngrx/store';
import { Component } from '@angular/core';
import { Store } from '@ngrx/store';

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

// Initial state
export const initialState = 0;

// Reducer
export const counterReducer = createReducer(
  initialState,
  on(increment, state => state + 1),
  on(decrement, state => state - 1)
);

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

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

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

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

// In your AppModule imports:
// StoreModule.forRoot({ count: counterReducer })

Output

A counter UI with a number displayed between two buttons. Clicking '+' increases the number, clicking '-' decreases it.

When to Use

Use NgRx when your Angular app has:

• Complex state shared across many components or modules.
• Multiple sources of truth that need to stay in sync.
• Requirements for clear state history or undo/redo features.
• Need for predictable state changes that are easy to debug and test.

For example, large e-commerce apps, dashboards with many widgets, or apps with offline data syncing benefit from NgRx. If your app is small or state is simple and local, NgRx might add unnecessary complexity.

Key Points

• NgRx centralizes state in a single store for predictable updates.
• It uses actions and reducers to manage state changes clearly.
• Best for large apps with complex, shared state.
• Helps with debugging by tracking all state changes.
• May be overkill for simple or small apps.

Key Takeaways

Use NgRx for managing complex, shared state in large Angular apps.

NgRx makes state changes predictable and easy to debug with actions and reducers.

Avoid NgRx in small apps with simple state to keep things simple.

NgRx helps keep your app's data flow clear and organized.

It is ideal when you need features like undo, redo, or state history.