NgRx store concept in Angular

Introduction

The NgRx store helps keep your app's data in one safe place. It makes it easy to share and update data across parts of your app without confusion.

When you want to share data between different parts of your Angular app.

When your app has complex data that changes often and needs to stay in sync.

When you want to keep track of app state changes clearly and predictably.

When you want to make debugging easier by seeing how data changes over time.

Syntax

Angular

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

// Define actions
const increment = createAction('[Counter] Increment');
const decrement = createAction('[Counter] Decrement');

// Define initial state
const initialState = 0;

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

// Use Store in component
constructor(private store: Store<{ count: number }>) {}

// Dispatch action
this.store.dispatch(increment());

// Select state
this.store.select('count').subscribe(value => console.log(value));

Actions describe what happened, reducers describe how state changes.

The store holds the app state and lets components read or update it.

Examples

This creates an action named 'loadItems' to signal loading items.

Angular

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

const loadItems = createAction('[Items] Load Items');

This reducer updates the state to show loading when 'loadItems' action runs.

Angular

import { createReducer, on } from '@ngrx/store';

const initialState = { items: [] };

const itemsReducer = createReducer(
  initialState,
  on(loadItems, state => ({ ...state, loading: true }))
);

This shows how to read the 'items' state from the store in a component.

Angular

constructor(private store: Store<{ items: any[] }>) {}

this.store.select('items').subscribe(items => console.log(items));

Sample Program

This Angular component shows a simple counter using NgRx store. Buttons dispatch actions to update the count. The count value updates automatically from the store.

Angular

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

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

const initialState = 0;

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

@Component({
  selector: 'app-counter',
  template: `
    <h1>Counter: {{ count }}</h1>
    <button (click)="incrementCount()">Increment</button>
    <button (click)="decrementCount()">Decrement</button>
  `
})
export class CounterComponent {
  count = 0;

  constructor(private store: Store<{ count: number }>) {
    this.store.select('count').subscribe(value => this.count = value);
  }

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

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

// Note: In a real app, you would register 'counterReducer' in StoreModule.forRoot({ count: counterReducer })

Important Notes

Always register your reducers in the Angular module using StoreModule.forRoot().

Use actions to describe changes, never change state directly.

Subscribe to store selectors to get updated state in your components.

Summary

NgRx store keeps app data in one place for easy sharing and updating.

Use actions and reducers to manage state changes clearly.

Components read state from the store and dispatch actions to update it.