When NgRx is overkill in Angular

Introduction

NgRx helps manage complex app data, but sometimes it adds too much work for simple needs.

Your app has only a few components sharing simple data.

You don't need undo/redo or time-travel debugging features.

State changes are straightforward and local to components.

You want faster development without extra setup.

Your app is small or a prototype where simplicity matters.

Syntax

Angular

No special syntax applies here since this is a guideline about when NOT to use NgRx.

NgRx uses actions, reducers, and selectors to manage state.

It requires boilerplate code and setup that might be unnecessary for small apps.

Examples

This example shows local state in a component without NgRx, which is easier for simple cases.

Angular

// Simple component state without NgRx
@Component({
  selector: 'app-counter',
  template: `<button (click)="count = count + 1">Count: {{count}}</button>`
})
export class CounterComponent {
  count = 0;
}

This shows shared state via a service, which can be simpler than NgRx for small apps.

Angular

// Using a service for shared state without NgRx
@Injectable({ providedIn: 'root' })
export class CounterService {
  count = 0;
  increment() { this.count++; }
}

@Component({
  selector: 'app-counter',
  template: `<button (click)="counterService.increment()">Count: {{counterService.count}}</button>`
})
export class CounterComponent {
  constructor(public counterService: CounterService) {}
}

Sample Program

This Angular component uses local state to count clicks. It shows how simple state can be handled without NgRx.

The button has an aria-label for accessibility.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-simple-counter',
  template: `
    <button (click)="count = count + 1" aria-label="Increment count">
      Count: {{count}}
    </button>
  `
})
export class SimpleCounterComponent {
  count = 0;
}

Important Notes

NgRx is powerful but adds complexity and boilerplate.

For small or simple apps, local component state or services are easier and faster.

Always choose the simplest tool that fits your app's needs.

Summary

NgRx is best for complex state with many parts and interactions.

Use local state or services when your app is simple or small.

Don't add NgRx if it makes your code harder without clear benefits.