A complete guide on NgRx Store Architecture using Angular

interface Action {  
type: string; 
}
			   

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

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

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

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

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

A passionate Technical writer and an SEO freak working as a Technical Content 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.