Angular 10 NgRX Store by Example

Angular 10 NgRX Store by Example

In this post we will give you information about Angular 10 NgRX Store by Example. Hear we will give you detail about Angular 10 NgRX Store by ExampleAnd how to use it also give you demo for it if it is necessary.

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 disptach 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 prequisite, 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:

exportinterfaceProduct{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

Creating an NgRx Reducer

Create a src/app/reducers folder and a file named product.reducer.ts with the following code:

// product.reducer.tsimport{Product}from'./../product/product.model';import{Action}from'@ngrx/store';exportconstADD_PRODUCT='ADD_PRODUCT';exportfunctionaddProductReducer(state:Product[]=[],action){switch(action.type){caseADD_PRODUCT:return[...state,action.payload];default:returnstate;}}

Configuring the NgRx Store

Next, open the src/app/app.module.ts file and update it as follows:

// app.module.tsimport{StoreModule}from'@ngrx/store';import{addProductReducer}from'./reducers/product.reducer';imports:[BrowserModule,StoreModule.forRoot({product:addProductReducer})],

We simply pass our reducer to the store. We can update our application state by dispatching the actions to the store.

Next, open the src/app/product/product.component.ts file and update it as follows:

// src/app/product/product.component.tsimport{Product}from'./product.model';import{AppState}from'./../app.state';import{Component,OnInit}from'@angular/core';import{Store}from'@ngrx/store';@Component({selector:'app-product',templateUrl:'./product.component.html',styleUrls:['./product.component.css']})exportclassProductComponentimplementsOnInit{products:Observable<Product[]>;constructor(privatestore:Store<AppState>){this.products=this.store.select(state=>state.product);}addProduct(name,price){this.store.dispatch({type:'ADD_PRODUCT',payload:<Product>{name:name,price:price}});}ngOnInit(){}}

We first subscribe to the store and fetch the products, next we add an action for adding a product to the store.

Next, create a src/app/app.state.ts file and add the following code:

// src/app/app.state.tsimport{Product}from'./product/product.model';exportinterfaceAppState{readonlyproduct:Product[];}

Displatching the NgRx Action(s)

Next, open the src/app/product/product.component.html file and update it as follows:

<divclass="panel panel-primary"><divclass="panel-body"><form><divclass="form-group"><labelclass="col-md-4">Product Name</label><inputtype="text"class="form-control"#productName/></div><divclass="form-group"><labelclass="col-md-4">Product Price</label><inputtype="text"class="form-control"#productPrice/></div><divclass="form-group"><button(click)="addProduct(productName.value,productPrice.value)"class="btn btn-primary">Add Product</button></div></form></div></div><tableclass="table table-hover"*ngIf="products != 0"><thead><tr><td>Product Name</td><td>Product Price</td></tr></thead><tbody><tr*ngFor="let product of products | async"><td></td><td></td></tr></tbody></table>

We first create a form to create a new product by disptching the corresponding action to the store and then we create a table to display the products we have created in the store. The products variable is an observable so we use the async pipe to subscribe to it.

We use Bootstrap 4 to add styles to our app. Read how you can add Bootstrap to your Angular 10 app.

You can serve your application using the following command:

$ ng serve --open

Conclusion

In this quick example, we learned how to use ngrx store in our Angular 10 example application. We’ve seen how we can dispatch actions, and create reducers.


Hope this code and post will helped you for implement Angular 10 NgRX Store by Example. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US