A Guide to State Management in Angular Using Ngrx (Version 12)

Do you need state management in an Angular application? If you want to reduce your code which has a large number of entity models in your application you can use Ngrx. Ngrx is a library that helps with the development of Angular applications by implementing a Redux architecture. The front-end angular developers will help you Ngrx in the Angular application. Ngrx implements a Redux architecture to help with the development of Angular applications.

It implements a Redux architecture and comes with its own set of tools and packages to reduce boilerplate code and make it easier to write apps that are more robust and testable. In this article, we will focus on the state management in Angular using Ngrx (Version 12).

Also Read:- Is Angular Worth Learning in 2022?

Extended Edition

Ngrx App State Management

Ngrx version 12 has introduced a new interface called StoreModule. This interface is used to define the store module and create the store instance. It provides an API for developers to interact with the store instance, subscribes to observables, and dispatch actions. The development company experts know how to implement Angular application state management using Ngrx.

Ngrx Combination:

• NgRx Store: It's the library that takes care of managing the application state and providing the API for accessing the store data.
• NgRx Effects: The library is responsible for handling side effects such as HTTP requests, which are triggered by actions.
• NgRx Entity: The library responsible for defining and tracking entities used in your application.
• NgRx Router: The library responsible for routing different parts of your application based on URL parameters and navigation actions. Angular development services help people to build applications and use Ngrx routers.

Implement an Angular Application State Management Using Ngrx

1.    Create an Angular Application

Firstly, install Angular CLI. Then, create a new Angular application with Angular CLI. Give the command to create a new application.

Ng new your -project-name

Then, create modules like mall and route files by giving a command.

Ng g module mall -- routing

Then, generate components by running the command.

Ng g component mall/products

2.    Run the App

After creating the app, run it to check if it is working or not.

Cd angular-state-management

Npm start

3.    Install Ngrx and tools

●      Command to install store

npm install @ngrx/store  - - save

●      Command to install effects

npm install @ngrx/effects - - save

●      Command to install ngRx data

npm install @ngrx/data - - save

●      Command to install NgRx Entity

npm install @ngrx/entity - - save

●      Command to install dev tool

npm install @ngrx/store-dev tools - - save

4.    Add NgRx Store to the Application

ng generate @ngrx schematics: store state  - - root - - module app.module.ts

5.    Create a Sub Module

Then, create a separate module for customers

ng generate module customer

6.    Create Customer Model

ReactJs development has professionals who create customer models and add codes for their client’s Angular application.

Now, we will create a customer and start adding code.

ng generate class models/customer

Then, your customer file will be created in the apps/model folder.

7.    Add Actions

We have to manage the collection of customers. We can change the collection of the customer's state by using the actions.  We will add Ngrx related code.

ng generate action custome .store/action/customer

8.    Add a customer reducer

All state changes will occur inside the reducer based on the selected action. The reducer will return to the newly created customer list object every time the state changes. Then, generate reducers for customers. Don’t add failures and success actions to the reducer.

ng generate reducer customer/store/reducer/customer

Then, create the function and add code to the reducer

CREATE src/app/ngrx/customer.reducer.spec.ts

CREATE src/app/ngrx/customer.reducer.ts

9.    Add Selector

Make a selector get the customers from the store. Then, modify the code

ng generate selector customer/store/selector/customer

10.    Add UI Component for Customers

Make customer view component

ng generate component customer/customer view

Add code to the customers-view.component.ts file

<h4>List of customers< /h4>

<div *ngFor=”let customer of customers$ | async; let i = index’ >

<span >{ {i+1} }.</span> { {customer.name} }

</div>

11.    Add UI Controls to Add New Customers

Make UI control component to add customers

ng generate component customer/customer Add

Add code to dispatch add customer action

This. store.dispatch (add customer(customer));

12.    Add Store Module In Customer Module

StoreModule.for Feature(customer Feature Key, reducer) ,

Then, add the exports

Exports: [ customer view component, customer Add component ]

Bring a custom module in the App module and update the app component with customer Add and customer view component. Now, you can run the app after all coding is completed.

Conclusion

State management in Angular provides a way to store data and share it between components.  You can contact ReactJs developers for state management in Angular applications using Ngrx. You can use Ngrx to reduce the code in your angular application. The data is also easily accessible and can be found anywhere in the application.