NgRx is a popular library for managing state in Angular applications using Redux principles. This tutorial assumes you have a basic understanding of Angular and its core concepts.

Step 1: Set up a new Angular Project

If you haven’t already, you can create a new Angular project using the Angular CLI:

ng new my-ngrx-app

Step 2: Install NgRx

Next, install the required NgRx packages:

npm install @ngrx/store @ngrx/effects @ngrx/entity @ngrx/router-store @ngrx/store-devtools

Step 3: Create a Store

In NgRx, you’ll need to define a store that holds your application state. Let’s create a simple store for managing a list of items.

Create a file named item.reducer.ts for your reducer:

// src/app/item.reducer.ts

import { createReducer, on } from '@ngrx/store';
import { addItem, removeItem } from './item.actions';

export const initialState: string[] = [];

export const itemReducer = createReducer(
  initialState,
  on(addItem, (state, { item }) => [...state, item]),
  on(removeItem, (state, { index }) => state.filter((_, i) => i !== index))
);

2. Create an action file named item.actions.ts:

// src/app/item.actions.ts

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

export const addItem = createAction('[Item] Add', props<{ item: string }>());
export const removeItem = createAction('[Item] Remove', props<{ index: number }>());

Step 4: Create a Store Module

Create a module that imports NgRx and provides the store configuration.

Create a file named item-store.module.ts:

// src/app/item-store.module.ts

import { NgModule } from '@angular/core';
import { StoreModule } from '@ngrx/store';
import { itemReducer } from './item.reducer';

@NgModule({
  imports: [
    StoreModule.forRoot({ items: itemReducer }), // 'items' is the key for your store
  ],
})
export class ItemStoreModule {}

Step 5: Use the Store in Your Component

Now, let’s create a component that interacts with the store.

Create a component using the Angular CLI:

ng generate component item-list

Modify item-list.component.ts:

// src/app/item-list/item-list.component.ts

import { Component } from '@angular/core';
import { Store, select } from '@ngrx/store';
import { addItem, removeItem } from '../item.actions';

@Component({
  selector: 'app-item-list',
  templateUrl: './item-list.component.html',
  styleUrls: ['./item-list.component.css'],
})
export class ItemListComponent {
  items$ = this.store.pipe(select('items'));

  constructor(private store: Store) {}

  addItem(item: string) {
    this.store.dispatch(addItem({ item }));
  }

  removeItem(index: number) {
    this.store.dispatch(removeItem({ index }));
  }
}

Create item-list.component.html to display the list of items and a button to add items:

<!-- src/app/item-list/item-list.component.html -->

<div>
  <input #itemInput />
  <button (click)="addItem(itemInput.value)">Add Item</button>
</div>

<ul>
  <li *ngFor="let item of items$ | async; let i = index">
    {{ item }}
    <button (click)="removeItem(i)">Remove</button>
  </li>
</ul>

Step 6: Import the Store Module

Finally, import the ItemStoreModule you created in app.module.ts:

// src/app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ItemStoreModule } from './item-store.module';
import { ItemListComponent } from './item-list/item-list.component';

@NgModule({
  declarations: [ItemListComponent],
  imports: [BrowserModule, ItemStoreModule],
  bootstrap: [ItemListComponent],
})
export class AppModule {}