Angular State Management with NgRx

Chameera Dulanga March 21, 2024 UPDATED

State management is the process of managing the states of user controls. It helps developers build large-scale applications with
sustaining high application performance.

When it comes to Angular, NgRx and NGXS are the two most-used libraries for state management, and they have some unique fe

In this article, I will introduce NgRx and walk you through the steps of creating a simple Angular application using it.

What is NgRx?
 NgRx Website

NgRx is inspired by Redux and helps developers simplify the application’s state in objects by enforcing a unidirectional data flow.

How NgRx works

The NgRx state management process is a combination of five key elements:

Store: The application state is maintained in the store. It is immutable.

 Selectors: Angular components can subscribe to the store and get updates through selectors.

Reducers: Reducers are responsible for handling the transition from one state to another.

Actions: Actions modify the state of the store by using reducers.

Effects: Effects are the results of actions. Also, they can be used to listen for particular action types and run when the

Although this process seems complex to implement, it is useful for data communication when the application grows.

So, let’s see how we can use NgRx in an Angular application.

Syncfusion Angular components are:

Lightweight
Modular
High-performing

How to use NgRx store with Angular

In this tutorial, we will be implementing a simple application to manage blog articles using NgRx store and Angular.

Step 1: Installing NgRx

NgRx can be installed using NPM, Yarn, or Angular CLI as follows:

// NPM
npm install @ngrx/store --save

// Yarn
yarn add @ngrx/store

// Angular CLI
ng add @ngrx/store@latest

Step 2: Creating the Store

After installation, you need to create a separate directory named /store under the src/app directory. This folder will contain all th
folder structure of the store directory would look like this:

-- app-- src-- app-- store

-- models-- actions
-- reducers

As a first step, you need to create an interface for articles. Let’s name the model article.model.ts.

export interface Article {

id: string;
name: string;
author: string;
publisher: string;
}
Then, you need to create an action file to define NgRx actions. Here, we have created a file named articles.actions.ts under the a
the NgRx store.

import { Action } from '@ngrx/store';

import { Article } from '../models/article.model';

export enum ArticleActionType {

ADD_ITEM = '[ARTICLE] Add ARTICLE',
}

export class AddArticleAction implements Action {

readonly type = ArticleActionType.ADD_ITEM;

constructor(public payload: Article) {}

export type ArticleAction = AddArticleAction;

In the above action file, we defined an action as a constant using enum. Then, we implemented the AddArticleAction class from
parameters: a type and an optional payload.

Now, we need to create a reducer to help us in state transitions. So, inside the reducers directory, create a course.reducer.ts file

import { Article } from '../models/article.model';

import { ArticleAction, ArticleActionType } from '../actions/article.actions';

const initialState: Array<Article> = [

{
id: '1',
name: 'Angular State Management with NgRx',
author: 'Chameera Dulanga',
publisher: 'SyncFusion'
},
];

export function ArticleReducer(

state: Array<Article> = initialState,
action: ArticleAction
) {
switch (action.type) {
case ArticleActionType.ADD_ITEM:
return [...state, action.payload];
default:
return state;
}
}

In the above reducer, we have created an initial state for the Article interface and a reducer function named ArticleReducer Whi
parameters. If the action type is ADD_ITEM, it will return the state and the payload. Otherwise, it will only return the state.

For the final step of store creation, we need to create another model to keep all application states in a single place. Here, we hav
like this:

import { Article } from '../models/article.model';

export interface State {

readonly article: Array<Article>;
}

Step 3: Registering the NgRx store

Now, you need to register the NgRx store in the Angular application. To do this, import the reducer created in the previous step t
the imports array.

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';

import { StoreModule } from '@ngrx/store';

import { ArticleReducer } from './store/reducers/article.reducer';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
StoreModule.forRoot({
course: CourseReducer,
}),
],
providers: [],
bootstrap: [AppComponent]
})

export class AppModule { }

Each and every property of Syncfusion Angular components are completely document
for easy access.

Step 4: Using the NgRx store

After registering the store in AppModule, you can start using it in your components. Here, we will be using AppComponent to di

import { Component, OnInit } from '@angular/core';

import { Store } from '@ngrx/store';
import { Observable } from 'rxjs';
import { CourseItem } from './store/models/courseItem.model';
import { AppState } from './store/models/app-state.model';
import { NgForm } from '@angular/forms';
import { AddItemAction } from './store/actions/course.action';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})

export class AppComponent implements OnInit {

articles$: Observable<Array<Article>>;
constructor(private store: Store<State>) {}

ngOnInit(): void {
this.articles$ = this.store.select((store) => store.article);
}

addArticle(form: NgForm) {
this.store.dispatch(
new AddArticleAction(form.value)
 );
form.reset();
}

The above code shows the app.component.ts file of our example. There, we have set articles$ to a type of observable and subsc
addArticle() function is responsible for dispatching new articles to the store.

Now, we need to modify the app.component.html file to display and create articles.

<section>
<div class="container">
<div class="row" style="margin-top: 5%;">
<div class="col-md-12" style="text-align: center; margin: 5%;">
<h2>My Articles</h2>
</div>
<div class="col-md-6">
<div class="card p-4 shadow-sm">
<form #myform="ngForm" (ngSubmit)="addArticle(myform)">
<div class="form-group">
<label for="name">Article Id</label>
<input
type="text"
class="form-control"
ngModel
name="id"
id="id"
aria-describedby="identity"
required
/>
</div>
<div class="form-group">
<label for="title">Title</label>
<input
type="text"
class="form-control"
ngModel
name="title"
id="title"
aria-describedby="title"
/>
</div>
<div class="form-group">
<label for="author">Author</label>
<input
type="text"
class="form-control"
ngModel
name="author"
id="author"
/>
</div>
<div class="form-group">
<label for="publisher">Publisher</label>
<input
type="text"
class="form-control"
ngModel
name="publisher"
id="publisher"
/>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
<div class="col-md-6">
<ul class="list-group">
<li class="list-group-item list-group-item-primary" *ngFor="let article of articles$ | async">
{{article.title}} <b>{{article.author}}</b>
</li>
</ul>
 </div>
</div>
</div>
</section>

That’s all there is to it! We have successfully configured an NgRx store with an Angular application.

GitHub reference
For more details, you can find the Angular State Management with NgRx demo on GitHub.

See the possibilities for yourself with live demos of Syncfusion Angular components.

Conclusion
NgRx is one of the most-used libraries for state management in Angular applications. I hope this article gives you a head start in
using NgRx.

Thank you for reading!

Syncfusion’s Angular UI component library is the only suite you will ever need to build an application, containing a wide range of
and responsive UI components in a single package.
For existing customers, the newest Essential Studio version is available for download from the License and Downloads page. If yo
can try our 30-day free trial to check out the available features. Also, check out our demos on GitHub.

You can contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!

Related blogs
Syncfusion Essential Studio 2024 Volume 1 Is Here!

How to Build a CRUD App in Angular

Easy Steps to Host an Angular App in GitHub Pages

Entering Invalid Dates Just Got Better in Angular Apps

Tags:

Angular, development, state management support, Web

Share this post:

CHAMEERA DULANGA
Software engineer with more than 3 years of working experience in React, Angula
Recognized as an AWS Community Builder for 2022. Tech Blogger since 2019 with
 More Posts

You must be logged in to post a comment.

Popular Now
10 JavaScript Naming Conventions Every Developer Should Know

Angular Promises Versus Observables

6 Easy Ways to Export Data to Excel in C#

 Be the first to get updates

Email Address

Subscribe

 Subscribe RSS feed