our

Latest Blogs

A simple guide on NgRx Entity in Angular

iFour Team -July 20, 2021

Listening is fun too.

Straighten your back and cherish with coffee - PLAY !

  •  
  •  
  •  
A simple guide on NgRx Entity in Angular

Introduction

Angular is a remarkable framework that may be used to create mobile and desktop web apps with spectacular UIs. It's made with JavaScript. we can utilize HTML, CSS, and JavaScript to create stunning client-side applications.

We will go through the NgRx Entity in Angular in depth. One of the first decisions we must make while using NgRx to develop our application is what format to use for storing data inside the store.

The amount of boilerplate that developers must write while developing apps with NgRx is one of the most common complaints. The difficulty in resolving the boilerplate issue is that the requisite explicitness is required in order to obtain the full benefits of the architecture. We believe that by creating focused libraries, we can assist remove some of this boilerplate while keeping all of NgRx's benefits.

Today, we're thrilled to announce the release of @ngrx/entity, the NgRx team's first boilerplate-reduction library. Its objective is to make it easier for developers to design reducer functions that keep collections of entities organized.

What is the definition of an entity?

Different forms of state are stored with NgRx, and these commonly include:

  • Online course platform with business data such as Courses or Lessons.
  • Certain user interface state, such as UI user preferences.
  • Entity categories include Course and Lesson, which represent various forms of business data.

An entity is defined in our code as a Typescript type declaration. The most relevant entities in an online course system, for example, would be Course and Lesson, which are described by these two custom object types:

 

export interface Course {
  id:number;
  description:string;
  iconUrl?: string;
  courseListIcon?: string;
  longDescription?: string;
  category:string;
  seqNo: number;
  lessonsCount?:number;
  promo?:boolean;
}

 

 

export interface Lesson {
  id: number;
  description: string;
  duration: string;
  seqNo: number;
  courseId?: number;
  videoId?: string;
}

 

What exactly is NgRx? When is it appropriate to use?

NgRx is an Angular framework for creating reactive apps. NgRx has libraries for managing both global and local states.

  • Isolation of side effects in order to get a more simplified component design.
  • Management of entity collections.
  • The Angular Router is integrated.
  • Developer tooling that makes it easier for developers to construct a variety of applications.

This library is intended to be used in conjunction with the NgRx Store and is an important component of the NgRx ecosystem. Instead of trying to come up with our own ad hoc in-memory database format, it's just so much better to use NgRx Entity from the start of our project.

Entity State Definition

Let's return to our Course entity and use NgRx Entity to redefine the entity state:

 

export interface DiaryState extends EntityState {

}
 

 

This is the same as the previous type definition, only we don't have to define the ids and entity properties for each entity anymore. Instead, we can inherit from EntityState and acquire the same effect with a similar type of safety and reduced code.

How Does It Work?

Entity adapters for several types of entities can be created with @ngrx/entity. We can quickly define reducer operations and generate selects using an entity adapter. Let's imagine we want to develop an application that handles a library of diaries, based on our sample application. This is how the diary interface looks:

 

interface Diary {
  id: string;
  title: string;
}

 

Creating an entity adapter is the first step in developing a reducer that maintains this collection:

 

import { createEntityAdapter } from '@ngrx/entity';
const diaryAdapter = createEntityAdapter();

 

The interface for our diary's state must then be declared:

 

import { EntityState } from '@ngrx/entity';
export interface DiaryState extends EntityState { }

 

EntityState has the following shape:

 

interface EntityState {
  ids: string[];
  entities: { [id: string]: V };
}

 

There are two key reasons why we keep a list of ids and an entity dictionary:

  • We aim to make finding a certain entity as quickly as possible. It's considerably faster to use the entities dictionary than to search through an array if we simply want to pick one diary from the shop.
  • I'd also like to keep the list's order. This is critical if we want to keep the list organized!

EntityState's shape accomplishes both objectives. It can also be expanded to include additional relevant information in the diary collection, such as the presently selected diary.

Following that, we'll specify some actions:

 

import { Action } from '@ngrx/store';
export enum DiaryActionTypes {
  ADD_ONE = '[Diary] Add One',
  UPDATE_ONE = '[Diary] Update One',
  DELETE_ONE = '[Diary] Delete One',
  GET_ALL = '[Diary] Get All'
}
export class AddOne implements Action {
  readonly type = DiaryActionTypes.ADD_ONE;
  constructor(public diary: DiaryModel) { }

export class UpdateOne implements Action {
  readonly type = DiaryActionTypes.UPDATE_ONE;
  constructor(
    public id: string,
    public changes: Partial,
  ) { }
}
export class DeleteOne implements Action {
  readonly type = DiaryActionTypes.DELETE_ONE;
  constructor(public id: string) { }
}
export class GetAll implements Action {
  readonly type = DiaryActionTypes.GET_ALL;
  constructor(public diary: DiaryModel[]) { }
}
export type DiaryActions
  = GetOne
  | UpdateOne
  | DeleteOne
  | GetAll;

 

Now we're ready to develop our diary reducer with the diaryAdapter:

 

const initialState: DiaryState = diaryAdapter.getInitialState();
export function diaryReducer(
  state:  DiaryState = initialState,
  action:  DiaryActions,
):  DiaryState {
  switch (action.type) {
    case  DiaryActionTypes.ADD_ONE:
      return  diaryAdapter.addOne(action. diary, state);
    case  DiaryActionTypes.UPDATE_ONE:
      return  diaryAdapter.updateOne({
        id: action.id,
        changes: action.changes,
      }, state);
    case  DiaryActionTypes.DELETE_ONE:
      return  diaryAdapter.deleteOne(action.id, state);
    case  DiaryActionTypes.GET_ALL:
      return  diaryAdapter.addAll(action. diary, state);
    default:
      return state;
  }
}

 

With the newly generated reducer, the new piece of state may be registered in the Store. Last but not least, we must create selectors for working with this state:

 

export const {
  selectIds,
  selectEntities,
  selectAll,
  selectTotal,
} = diaryAdapter.getSelectors();

 

One-stop-oplossing voor Angular-webontwikkeling ? Uw zoekopdracht eindigt hier.

So, what were the boilerplates we saved?

  • There's no need to specify all the state interface's properties manually anymore.
  • The adapter handles all the implementations for adding, removing, and updating entities in the state.
  • For us, the adapter generates a collection of frequently used selectors.
Conclusion

NgRx Entity is a really useful package, but it's important to grasp the basic store concepts like Actions, Reducers, Selectors and store architecture in general before using it.

If we're already familiar with these ideas, we've most likely tried to figure out the ideal approach to organizing our store data.

NgRx Entity was created exclusively to handle only the business entities in our store, making it easy to store them in memory.

Work with us

Well do everything we can to make our next best project!

Our Insights

Check out our most recent blogs

An in-depth guide on Angular Dependency Providers
An in-depth guide on Angular Dependency Providers

What is Angular? Angular is a frontend development framework used for building single-page client applications using HTML and Typescript. It is written in Typescript. What...

A simple guide to Build Angular Reactive Templates with Ngif and Async Pipe
A simple guide to Build Angular Reactive Templates with Ngif and Async Pipe

Angular Templates seamlessly help to expedite the development process with flawless assistance of components and other specific elements. These are dynamic and renders according...

Our Partners

Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo

Work With Us

Well do everything we can to make our next best project!