Introduction to NgRx (State Management) in Angular

🚀 What is NgRx?

• NgRx is a state management library for Angular applications.
• It is based on Redux principles and provides a way to manage application state in a predictable manner.
• State represents the data of your application at any given point in time.

---

📦 Why Use NgRx?

Benefit	Description
Predictable State	Ensures the state is predictable and consistent.
Centralized State	Centralizes state management, making it easier to manage and debug.
Time Travel Debugging	Allows you to travel back and forth through state changes.
Scalable	Suitable for large applications with complex state management needs.

---

🔥 Basic Example

Suppose you want to manage a list of products using NgRx:

1. Install NgRx Packages

ng add @ngrx/store
ng add @ngrx/effects
ng add @ngrx/entity
ng add @ngrx/store-devtools

2. Define State and Actions

Create product.actions.ts:

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

export const loadProducts = createAction('[Product] Load Products');
export const loadProductsSuccess = createAction('[Product] Load Products Success', props<{ products: any[] }>());
export const loadProductsFailure = createAction('[Product] Load Products Failure', props<{ error: any }>());

3. Create Reducer

Create product.reducer.ts:

import { createReducer, on } from '@ngrx/store';
import { loadProducts, loadProductsSuccess, loadProductsFailure } from './product.actions';

export const initialState = {
  products: [],
  error: null
};

const _productReducer = createReducer(
  initialState,
  on(loadProducts, state => ({ ...state })),
  on(loadProductsSuccess, (state, { products }) => ({ ...state, products })),
  on(loadProductsFailure, (state, { error }) => ({ ...state, error }))
);

export function productReducer(state, action) {
  return _productReducer(state, action);
}

4. Set Up Store Module

In app.module.ts:

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

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

5. Dispatch Actions and Select State

In app.component.ts:

import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import { loadProducts } from './product.actions';

@Component({
  selector: 'app-root',
  template: `
    <h1>Products</h1>
    <ul>
      <li *ngFor="let product of products$ | async">{{ product.name }}</li>
    </ul>
  `
})
export class AppComponent implements OnInit {
  products$ = this.store.select(state => state.products.products);

  constructor(private store: Store) {}

  ngOnInit() {
    this.store.dispatch(loadProducts());
  }
}

---

📄 How NgRx Works Internally

1. Actions
   Actions are dispatched to express intent to change the state.
2. Reducers
   Reducers handle actions and define how the state changes.
3. Selectors
   Selectors are used to query the state.
4. Effects
   Effects handle side effects like API calls.

---

🛠️ Key Concepts

Concept	Description
Store	Centralized state container.
Actions	Express intent to change the state.
Reducers	Define how the state changes.
Selectors	Query the state.
Effects	Handle side effects.

---

📚 Advanced: Using NgRx Effects

You can use NgRx Effects to handle side effects like API calls:

Create product.effects.ts:

import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { of } from 'rxjs';
import { catchError, map, mergeMap } from 'rxjs/operators';
import { ProductService } from './product.service';
import { loadProducts, loadProductsSuccess, loadProductsFailure } from './product.actions';

@Injectable()
export class ProductEffects {

  loadProducts$ = createEffect(() =>
    this.actions$.pipe(
      ofType(loadProducts),
      mergeMap(() => this.productService.getProducts().pipe(
        map(products => loadProductsSuccess({ products })),
        catchError(error => of(loadProductsFailure({ error })))
      ))
    )
  );

  constructor(private actions$: Actions, private productService: ProductService) {}
}

⚡ NgRx Effects are useful for handling asynchronous operations and side effects.

---

📜 Summary

• NgRx provides a powerful state management solution for Angular applications.
• Actions express intent to change the state.
• Reducers define how the state changes.
• Selectors query the state.
• Effects handle side effects.