A Visual Deep Dive into NgRx and Angular
--
What is NgRx and Angular? 🤔
NgRx (shorthand for Angular Rx) is a framework for building reactive applications in the Angular framework.
In a nutshell - NgRx helps to separate the logic for the application’s state management from the logic of the views that get rendered to the end user.
Angular is an application-design framework and development platform for creating efficient and sophisticated single-page apps.
I wrote this article a while back explaining the key components of Angular, and how it works. If you are new to Angular and want a quick intro, feel free to give it a read!
When do I use NgRx and Angular together? 🛠
NgRx and Angular are used hand-in-hand for requirements where making fewer API calls are required.
Rather than the Angular application having to reload the payload/user information from an API call, or be displayed after being fetched from multiple database queries, NgRx enables development teams to load the data once, and display it on multiple views. Without having to fetch the data multiple times.
NgRx provides a store (like a centralized layer) for the application to fetch the data from.
⚠️ One thing to keep in mind though: Yes, one might think that NgRx sort of works similar to local storage. But, it is not meant for persisting data.
More so, NgRx’s purpose is to serve as a mechanism to keep track of the data. Aka, the state of the data. Especially, in terms of end user/application interaction (i.e. form data, page(s) history, drop-down menus, etc.).
The other strategic advantage of NgRx is that it provides immutability. Meaning, the application will not be modifying the data (state) directly. Instead, when the change to the state will be made, a new copy of the data will be returned (an updated state). And all you’ll need to do is scan for the state changes in the NgRx store.
Redux Dev Tools is a super cool plugin I have used in the past for seeing those changes.
Here is some more background before getting too deep 🧐
Before getting deep into NgRx, I highly recommend learning about RxJs. Learning this will give you a solid foundation in understanding the concepts behind Observables. NgRx and RxJs work together. That combination can appear complex at first, and you might even wonder why anyone would create this craziness altogether to begin with. 😵💫
But, trust me 🙂 - It will grow on you, and you will enjoy working with it on large/medium-scale web applications!
Author’s background with NgRx and Angular 👨💻
Back in 2019, I was chosen in my company to lead an effort for architecting and building a solution to centralize the previously disjointed legacy customer application flows under one central modernized experience.
On the surface, that sounds pretty simple, huh? … Keep reading 😹
From an extremely high-level, here are just a few of the challenges I was presented and solved:
- Unify similar customer application flows under one central experience to preserve consistent branding and UX/DX standards.
- Find a way to eliminate the API call sprawl - At the time, literally every application flow involved at least one repeated API call between AWS Cloud and On-Prem services. Especially with proxying enabled. This was causing performance and maintenance nightmares. Even worst, poor customer experience.
- Create a scalable and developer-friendly framework for future enhancements to the new application, so that teams are not building and deploying services in silos.
And so, I chose to build a Micro Frontend application using Angular and NgRx.
My use case needs had fit the offerings of Angular and NgRx pretty closely. So, I got started with a simple PoC (Proof of Concept), and built onwards.
Buuuuut 🤫
It was not always clear how NgRx would work with our Micro Frontend for future enhancements. Like, if another team was to create their Angular library and plug it into the Micro Frontend, what would they need to do? Update the store? The reducer? The actions? Write a whole new selector?
Our solution was quickly turning against us. And as a Tech Lead, I had to act swiftly and figure out how to create shared understanding amongst all of my teams. And also help devise a pattern for teams in building their (previously disjointed) application flows under the centralized application.
NgRx - Visuals to the Rescue! 🦸♂️
I am a visual kinda guy.
To me, pictures speak at least a thousand words.
I sat down one evening and came up with the image below to explain to my dev and product teams on how NgRx would work for our new application flows:
The image above is pretty much the same as the one shared here on the NgRx docs. All I did was turn it into a common, simple, real-life example to help everyone put the pieces together. 🙂
Step 1) Component dispatches a call/event to the Action.
You can think of this as a customer ordering a meal from a restaurant via Uber eats.
Step 2) Action(s) hold the event, fetches from the Effects.
The restaurant staff see the order placement, jots it down, and gives it to the chefs for cooking.
If needed, they would also ask for the required ingredients/groceries needed for cooking the ordered meal.
Step 3) Reducer (made up of pure functions) perform actions and state updates to the NgRx store.
The chefs cook the meal and puts it on the counter.
Step 4) Selector (also made up of pure functions) grabs from the NgRx store and fetches to the Component.
You can think of this as the Uber eats person picks up the ordered meal, and delivers it to the customer.
Closing thoughts 🏁
And that pretty much is how I solidified my understanding and knowledge about NgRx state management in Angular, and also taught it to my peers.
This helped us implement future libraries in Angular, and move at-pace with our deliverables.
Later on, we ran into some different challenges due to API calls. Some were On-Prem, and some were on AWS Cloud, causing responses times to be all over the places (over 100 milliseconds 😬). But, that is another article for a different day.
Thank you for reading! 🙏
Feel free to ask any questions, or comments below.
