In this tutorial we’ll learn how to use the NgRX store in our Angular 10 example application. We’ll see how we can create actions, reducers, and dispatch actions. The Angular NgRx store is a client-side data management pattern that implements the Redux pattern, and which was invented by Facebook using RxJS observables. As a prerequisite, you need to have Node.js and Angular CLI installed on your local development machine for this to work.

Angular 10 NgRx Store by Example

Open a new command-line interface and run the following commands:

$ ng new angular10ngrx
$ cd angular10ngrx

The CLI will ask you a couple of questions — including “Would you like to add Angular routing?” (type y for “yes”) and “Which stylesheet format would you like to use?” (choose CSS).

Next, create a new Angular component using the following command:

$ ng g c product

Next, a file inside the src/app/product folder with the product.model.ts name as follows:

export interface Product {
  name: string;
  price: number;
}

#angular-10 #angular #programming #ngrx