×

iFour Logo

A complete guide on NgRx Store Architecture using Angular

Kapil Panchal - August 16, 2021

Listening is fun too.

Straighten your back and cherish with coffee - PLAY !

  • play
  • pause
  • pause
A complete guide on NgRx Store Architecture using Angular

Thereā€™s no doubt that Angular is a foremost front-end technology radically transforming the world of application development. Its operational swiftness and impeccable adaptability pique the curiosity of clients and prompt them to hire Angular developers for their projects. One of the most exciting features this UI platform is known for is the ngrx library.

Now what is Ngrx? Think of your Angular application as a big, busy library where you have various sections for various books. Just like that, you have different components to handle different parts of the UI.

Assume you're a librarian keeping track of all the books. You have visitors who are seeking certain books, and you want to make their experience as pleasant as possible. But here's the catch: you don't have a modern computerized system to handle your books. You're manually jotting down all the book details and looking for them in massive stacks of volumes. It takes time and is difficult, causing visitors to become frustrated.

This is when NGRX comes in as your amazing assistant. It's like having a sophisticated library management system. NGRX provides a digital catalog of all the books and their locations. When a visitor asks for a specific book, you can instantly look it up in your catalog and guide them to the exact shelf where it's located. NGRX helps you organize, search, and retrieve books efficiently.

NGRX is your tool to manage the complex data and state in your application. It's like having a digital library catalog that ensures your Angular components can access and update data seamlessly, making your app's performance as smooth as a well-organized library visit. Without NGRX, managing things becomes difficult.


What is NgRx technically?


NgRx is a type of Angular framework for building reactive applications. NgRx provides picture perfect library support for:

Ā 
  • Managing global and local state.
  • To promote a cleaner component architecture, it is an isolate of side effects.
  • Entity collection management.
  • Integration with the Angular Router.
  • When building many different types of applications, it uses Developer tooling that enhances developer experience.

Packages


NgRx packages are mainly divided into these categories

Ā 

State

  • StoreĀ - RxJS used for global state management for Angular apps.
  • EffectsĀ - Side effect model for @ngrx/store.
  • Router StoreĀ - connect the Angular Router to @ngrx/store for Bindings.
  • EntityĀ ā€“ To manage record collections, it will use Entity State adapter.
  • ComponentStoreĀ - Standalone library for managing local/component state.

Data

  • DataĀ - Extension for simplified entity data management.

View

  • ComponentĀ - Extension for fully reactive Angular applications.

Developer Tooling

  • Store DevtoolsĀ - It enables visual tracking of state and time-travel debugging. It is Instrumentation for @ngrx/store.
  • SchematicsĀ - Angular applications using NgRx libraries is a Scaffolding library.
Ā 

Let's see the following diagram which demonstrates the complete flow of a persistenceĀ EntityActionĀ such asĀ QUERY_ALLĀ for theĀ HeroĀ entity type.

  • The NgRx data EntityReducer reads the actionā€™s entityNameĀ property (HeroĀ in this example). after that, it forwards the action and existing entity collection state to theĀ EntityCollectionReducerĀ for heroes.
  • The collection reducerĀ picks a switch-case based on the action of the entityOpĀ (operation) property. That case processes the action and collection state.it will be put into a new (updated) hero collection.
  • The store updates theĀ entity cacheĀ in the state tree with that updated collection.
  • In the view, NgRx observable selectors detect and report the changes (if any) to subscribers.
  1. First of all, the view/component callsĀ EntityCollectionService.getAll(), which dispatches the hero'sĀ QUERY_ALLĀ EntityActionĀ to the store.
  2. NgRx kicks into gearā€¦
  3. The original EntityActionĀ then goes to theĀ EntityEffects.
  4. The effect selects anĀ EntityDataServiceĀ for that entity type. Data service is used to sends an HTTP request to the server
  5. The effect turns the HTTP response into a newĀ successĀ action with heroes (or anĀ errorĀ action if the request failed)
  6. NgRx effect effectsĀ Dispatches that action to the store.

Letā€™s see each component in a detailed explanation:

Actions


Actions are one of the main building blocks in NgRx architecture. Actions represent unique eventsĀ that happen throughout our application.

Actions are used in many ways in NgRx. Actions are the inputs and outputs of systems in NgRx. Actions help you to understand how events are handled in our application.

Ā 

The Action interface

AnĀ ActionĀ in NgRx is formed by a simple interface:

interface Action {  
type: string; 
}
			   

The interface has only one property, and it is the type that is represented as a string. TheĀ typeĀ property is for performing the action that will be dispatched in our application. Here the value of the type comes in the form ofĀ [Source] Event. value is used to provide a context of what category of action it is, and where the action was dispatched from. We add properties to an action to provide additional context or metadata for an action.

Below are examples of actions:

{
 type: '[Auth API] Login Success' 
}
			  

After interacting with a backend API, this action describes an event triggered by a successful authentication.

{ 
type: '[Login Page] Login',
username: string;
password: string;
 }
			  

This action performs an event that is triggered by a user clicking on the login button from the login page in an attempt to authenticate a user. Additional metadata provided from the login page is defined as username and password.

Ā 

Writing actions

There are some rules to writing effective actions within your application.

  • Upfront - it is used to write actions before developing new features to understand and gain a shared knowledge of that feature in advance.
  • Divide - Based on the event source it will categorize actions.
  • Many - As the more actions you write, the better you express flows in your application.
  • Event-Driven - captureĀ events using that separating the description of an event and the handling of that event.
  • Descriptive - it provides an environment that is targeted to a unique event with more detailed information.

Let's see an example of an action that is initiating a login request.

import { createAction, props } from '@ngrx/store'; 
export const login = createAction(
'[Login Page] Login', 
props<{ username: string; password: string }>()
 );
			  

Above theĀ createActionĀ function returns a function. When called returns an object in the shape of theĀ ActionĀ interface. To define any additional metadata needed for the handling of the action, theĀ propsĀ method is used. Action creators provide a type-safe and consistent way to construct an action that is being dispatched.

To return theĀ ActionĀ when dispatching, use the action creator.

onSubmit(username: string, password: string) { 
store.dispatch(login({ username: username, password: password })); 
}
			  

TheĀ loginĀ action creator receives usernameĀ andĀ password asĀ an object and returns a plain JavaScript object with aĀ typeĀ property ofĀ [Login Page] Login, andĀ usernameĀ andĀ passwordĀ as additional properties.

The returned action has context about where the action came from and what event happened.

  • The category of the action is held within the square bracketsĀ [].
  • The category is used to make group actions for a particular area like a component page, backend API, or browser API.
  • TheĀ LoginĀ text after the category is a description of what event occurred from this action. In this case, to attempt to authenticate with a username and password the user clicked a login button from the login page.

Reducers


Reducers in NgRx are responsible for handling transitions from one state to another state in our application. Reducer functions handle these transitions by determining whichĀ actionsĀ to handle. Reducers are pure functions it means that they produce the same output for a given input. They are without any side effects they handle each state transition synchronously. Each reducer function takes the current state, the latestĀ ActionĀ dispatched, and determines whether to return a newly modified state or the original state.

Selectors


Selectors are pure functions used for pick up slices of store state. For optimizing this selection @ngrx/store provides some helper functions. When selecting slices of state selectors provide many features. The features are:

  • Portability
  • Memoization
  • Composition
  • Testability
  • Type Safety

When using theĀ createSelectorĀ andĀ createFeatureSelectorĀ functions the @ngrx/store keeps track of the latest arguments in which our selector function was invoked. The last result can be returned when the arguments match without reinvoking your selector function. This can provide performance benefits, particularly with selectors that perform expensive computation. This practice is known asĀ memoization.

Conclusion


In this blog, we learned what is NgRx and NgRx store. We have gone through NgRx package categories like state, data, view and developer tooling. We have also learned the architecture and its main components like actions, reducer and selectors with example.

A complete guide on NgRx Store Architecture using Angular Table of Content 1. What is NgRx? 2. Packages 2.1. State 2.2. Data 2.3. View 2.4. Developer Tooling 3. Actions 3.1. The Action interface 3.2. Writing actions 4. Reducers 5. Selectors 6. Conclusion Thereā€™s no doubt that Angular is a foremost front-end technology radically transforming the world of application development. Its operational swiftness and impeccable adaptability pique the curiosity of clients and prompt them to hire Angular developers for their projects. One of the most exciting features this UI platform is known for is the ngrx library. Now what is Ngrx? Think of your Angular application as a big, busy library where you have various sections for various books. Just like that, you have different components to handle different parts of the UI. Assume you're a librarian keeping track of all the books. You have visitors who are seeking certain books, and you want to make their experience as pleasant as possible. But here's the catch: you don't have a modern computerized system to handle your books. You're manually jotting down all the book details and looking for them in massive stacks of volumes. It takes time and is difficult, causing visitors to become frustrated. This is when NGRX comes in as your amazing assistant. It's like having a sophisticated library management system. NGRX provides a digital catalog of all the books and their locations. When a visitor asks for a specific book, you can instantly look it up in your catalog and guide them to the exact shelf where it's located. NGRX helps you organize, search, and retrieve books efficiently. NGRX is your tool to manage the complex data and state in your application. It's like having a digital library catalog that ensures your Angular components can access and update data seamlessly, making your app's performance as smooth as a well-organized library visit. Without NGRX, managing things becomes difficult. What is NgRx technically? NgRx is a type of Angular framework for building reactive applications. NgRx provides picture perfect library support for: Ā  Managing global and local state. To promote a cleaner component architecture, it is an isolate of side effects. Entity collection management. Integration with the Angular Router. When building many different types of applications, it uses Developer tooling that enhances developer experience. Packages NgRx packages are mainly divided into these categories Ā  State StoreĀ - RxJS used for global state management for Angular apps. EffectsĀ - Side effect model for @ngrx/store. Router StoreĀ - connect the Angular Router to @ngrx/store for Bindings. EntityĀ ā€“ To manage record collections, it will use Entity State adapter. ComponentStoreĀ - Standalone library for managing local/component state. Data DataĀ - Extension for simplified entity data management. View ComponentĀ - Extension for fully reactive Angular applications. Developer Tooling Store DevtoolsĀ - It enables visual tracking of state and time-travel debugging. It is Instrumentation for @ngrx/store. SchematicsĀ - Angular applications using NgRx libraries is a Scaffolding library. Read More: A Complete Guide On Angular Rxjs Library Ā  Let's see the following diagram which demonstrates the complete flow of a persistenceĀ EntityActionĀ such asĀ QUERY_ALLĀ for theĀ HeroĀ entity type. [image source] The NgRx data EntityReducer reads the actionā€™s entityNameĀ property (HeroĀ in this example). after that, it forwards the action and existing entity collection state to theĀ EntityCollectionReducerĀ for heroes. The collection reducerĀ picks a switch-case based on the action of the entityOpĀ (operation) property. That case processes the action and collection state.it will be put into a new (updated) hero collection. The store updates theĀ entity cacheĀ in the state tree with that updated collection. In the view, NgRx observable selectors detect and report the changes (if any) to subscribers. First of all, the view/component callsĀ EntityCollectionService.getAll(), which dispatches the hero'sĀ QUERY_ALLĀ EntityActionĀ to the store. NgRx kicks into gearā€¦ The original EntityActionĀ then goes to theĀ EntityEffects. The effect selects anĀ EntityDataServiceĀ for that entity type. Data service is used to sends an HTTP request to the server The effect turns the HTTP response into a newĀ successĀ action with heroes (or anĀ errorĀ action if the request failed) NgRx effect effectsĀ Dispatches that action to the store. Letā€™s see each component in a detailed explanation: Actions Actions are one of the main building blocks in NgRx architecture. Actions represent unique eventsĀ that happen throughout our application. Actions are used in many ways in NgRx. Actions are the inputs and outputs of systems in NgRx. Actions help you to understand how events are handled in our application. Ā  The Action interface AnĀ ActionĀ in NgRx is formed by a simple interface: interface Action { type: string; } The interface has only one property, and it is the type that is represented as a string. TheĀ typeĀ property is for performing the action that will be dispatched in our application. Here the value of the type comes in the form ofĀ [Source] Event. value is used to provide a context of what category of action it is, and where the action was dispatched from. We add properties to an action to provide additional context or metadata for an action. Below are examples of actions: { type: '[Auth API] Login Success' } After interacting with a backend API, this action describes an event triggered by a successful authentication. { type: '[Login Page] Login', username: string; password: string; } This action performs an event that is triggered by a user clicking on the login button from the login page in an attempt to authenticate a user. Additional metadata provided from the login page is defined as username and password. Ā  Writing actions There are some rules to writing effective actions within your application. Upfront - it is used to write actions before developing new features to understand and gain a shared knowledge of that feature in advance. Divide - Based on the event source it will categorize actions. Many - As the more actions you write, the better you express flows in your application. Event-Driven - captureĀ events using that separating the description of an event and the handling of that event. Descriptive - it provides an environment that is targeted to a unique event with more detailed information. Let's see an example of an action that is initiating a login request. import { createAction, props } from '@ngrx/store'; export const login = createAction( '[Login Page] Login', props() ); Above theĀ createActionĀ function returns a function. When called returns an object in the shape of theĀ ActionĀ interface. To define any additional metadata needed for the handling of the action, theĀ propsĀ method is used. Action creators provide a type-safe and consistent way to construct an action that is being dispatched. To return theĀ ActionĀ when dispatching, use the action creator. onSubmit(username: string, password: string) { store.dispatch(login({ username: username, password: password })); } TheĀ loginĀ action creator receives usernameĀ andĀ password asĀ an object and returns a plain JavaScript object with aĀ typeĀ property ofĀ [Login Page] Login, andĀ usernameĀ andĀ passwordĀ as additional properties. The returned action has context about where the action came from and what event happened. The category of the action is held within the square bracketsĀ []. The category is used to make group actions for a particular area like a component page, backend API, or browser API. TheĀ LoginĀ text after the category is a description of what event occurred from this action. In this case, to attempt to authenticate with a username and password the user clicked a login button from the login page. Searching for Trusted AngularJS Development Company ? CONTACT US Reducers Reducers in NgRx are responsible for handling transitions from one state to another state in our application. Reducer functions handle these transitions by determining whichĀ actionsĀ to handle. Reducers are pure functions it means that they produce the same output for a given input. They are without any side effects they handle each state transition synchronously. Each reducer function takes the current state, the latestĀ ActionĀ dispatched, and determines whether to return a newly modified state or the original state. Selectors Selectors are pure functions used for pick up slices of store state. For optimizing this selection @ngrx/store provides some helper functions. When selecting slices of state selectors provide many features. The features are: Portability Memoization Composition Testability Type Safety When using theĀ createSelectorĀ andĀ createFeatureSelectorĀ functions the @ngrx/store keeps track of the latest arguments in which our selector function was invoked. The last result can be returned when the arguments match without reinvoking your selector function. This can provide performance benefits, particularly with selectors that perform expensive computation. This practice is known asĀ memoization. Conclusion In this blog, we learned what is NgRx and NgRx store. We have gone through NgRx package categories like state, data, view and developer tooling. We have also learned the architecture and its main components like actions, reducer and selectors with example.
Kapil Panchal

Kapil Panchal

A passionate Technical writer and an SEO freak working as a Content Development Manager at iFour Technolab, USA. With extensive experience in IT, Services, and Product sectors, I relish writing about technology and love sharing exceptional insights on various platforms. I believe in constant learning and am passionate about being better every day.

Build Your Agile Team

Categories

Ensure your sustainable growth with our team

Talk to our experts
Sustainable
Sustainable
 
Blog Our insights
Row-Level Security in Power BI: Implementation & Use Cases

27 March 2025

Kapil Panchal

Row-Level Security in Power BI: Implementation & Use Cases

The very first reason why you should implement Row Level Security is to foster trust, a crucial element for any business's success. Next, it reduces data clutter and helps you load...

Power BI Performance Best Practices For Superior Results

25 March 2025

Kapil Panchal

Power BI Performance Best Practices For Superior Results

The performance of Power BI is significantly influenced by two essential factors: design consistency and the rapid loading of BI elements. This holds true whether you choose Tableau...

Types Of Power Automate Flows – A CTO’s Guide

18 March 2025

Kapil Panchal

Types Of Power Automate Flows – A CTO’s Guide

Power Automation is no longer an option but a necessity for every firm, be it legal, fintech, aviation, or healthcare. In times of hectic schedules, just imagine there you have an...