Angular 10 NgRX Store by Example

In this tutorial, we’ll learn how to use 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, invented by Facebook, using RxJS observables.

As a prerequisite, you need to have Node.js and Angular CLI installed on your local development machine,

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 — If 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;
}

Installing NgRx Libraries

Next, run the following command to install ngrx from npm in your project as follows:

$ npm install @ngrx/core
$ npm install @ngrx/store
$ npm install @ngrx/effects

#angular-10 #angular