Mastering State Management in Angular with NgRx

What is NgRx?

NgRx is a powerful state management library designed specifically for Angular applications. In front-end development, state refers to the data and its structure used to represent the current state of the user interface. Managing the state in complex applications is crucial, and NgRx plays a vital role in state management. By adhering to the principles of Redux, NgRx utilizes concepts such as effects, actions, reducers, selectors, and state to handle and modify data in a structured manner.

How NgRx Empowers Developers?

To uphold a robust structure in the application development process, especially when dealing with complex applications, it is advisable to elevate it to a higher level of abstraction. By leveraging NgRx, developers can elevate their projects to a higher level of abstraction, enhancing overall efficiency. This tool is invaluable when establishing communication between components operating in varied states, facilitating the seamless transmission of data from one component to another. Embracing NgRx enables developers to streamline complex processes and ensure a more cohesive development workflow. 

The Core Principles of State Management

  1. Single Store: The State of an application should be stored in a single state. The store is responsible for sending data from store to component not from component to component.
  2. Read-only State: The State should be immutable or read-only. To change the state a new action should be triggered or emitted.
  3. Reducers (Pure functions): Reducer takes the current state and an action, and returns the new state.

Simple representation of how data flows from store to component instead of component to component.


Below is the list of commands used for the installation of NgRx.

  • npm install @ngrx/store –save
  • npm install @ngrx/effects –save

Steps to Create Store and Consume API Data Effectively

Step 1: Create a folder as +state

  • We create a folder named +state to ensure it represents the NgRx store and its related files.
  • Inside the +state folder, create four files: sampleStore.Action.ts, sampleStore.effects.ts, sampleStore.reducer.ts, and sampleStore.selector.ts. Instead of a Sample store, we can use our related file or module name.

Step 2: Create another folder as types

  • Inside the types folder, we declare the type of data coming from API and name that type related to our component or functionality. For example, if my functionality name is data list I’ll name it dataList.type.ts

  • We have one more file inside the types folder, which is state.ts. Inside the state.ts file, we define the state for all type.ts files used in the reducer for the initial state to ensure the right data is returned.
DataList type file
dataList.state.ts file

Step 3: Create a service file

  • In the service file, list APIs used with details such as name, endpoint URL, HTTP method, brief description, key request parameters, response formats, headers/auth.

Step 4: Create actions

  • Create 3 actions, one to invoke the API, the second to return API success data, and the last to return an error message if the API fails.

Step 5: Create a selector

  • We need to create a selector to make sure which API data we need to fetch and it’s type as defined in the state.ts file

Step 6: Create effects

  • Create an effect that fetches data from an API and returns it to the module where its respective selector is being called

Step 7: Create a reducer

  • Reducer takes the current state and action as an argument and returns a new state

Step 8: Create a Local Storage Sink

Define the created state and reducer in the module.ts file to preserve data during a refresh and access data from the store.

  • The localStoreSyncReducer function synchronizes the NgRx store with local storage, ensuring that data persists across page refreshes.


Adopting NgRx state management empowers developers to build robust, maintainable,  scalable Angular applications. The structured approach, coupled with the wealth of tools provided by NgRx, sets the stage for efficient development and long-term success.

About the author

Ganesh Mugada

I am an experienced Angular Developer with nearly 3 years of hands-on experience in Angular development. I have cultivated a deep understanding of building robust and scalable web applications. My expertise lies in crafting efficient user interfaces and implementing complex features using the Angular framework. I am proficient at leveraging NGRX for state management and ensuring code quality through comprehensive unit testing.

Add comment

Welcome to Miracle's Blog

Our blog is a great stop for people who are looking for enterprise solutions with technologies and services that we provide. Over the years Miracle has prided itself for our continuous efforts to help our customers adopt the latest technology. This blog is a diary of our stories, knowledge and thoughts on the future of digital organizations.

For contacting Miracle’s Blog Team for becoming an author, requesting content (or) anything else please feel free to reach out to us at

Who we are?

Miracle Software Systems, a Global Systems Integrator and Minority Owned Business, has been at the cutting edge of technology for over 24 years. Our teams have helped organizations use technology to improve business efficiency, drive new business models and optimize overall IT.

Recent Posts