A Visual Deep Dive into NgRx and Angular

What is NgRx and Angular? 🤔

When do I use NgRx and Angular together? 🛠

Here is some more background before getting too deep 🧐

Author’s background with NgRx and Angular 👨‍💻

  • 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.

Buuuuut 🤫

NgRx - Visuals to the Rescue! 🦸‍♂️

Visual Deep Dive - NgRx Data Flow using the Uber Eats model

Step 1) Component dispatches a call/event to the Action.

Step 2) Action(s) hold the event, fetches from the Effects.

Step 3) Reducer (made up of pure functions) perform actions and state updates to the NgRx store.

Step 4) Selector (also made up of pure functions) grabs from the NgRx store and fetches to the Component.

Closing thoughts 🏁

Thank you for reading! 🙏

--

--

Multi-disciplinary Technical Lead specialized in building products users love. Today, I manage & secure big data in the cloud. All views shared are my own.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abdul Wahab

Multi-disciplinary Technical Lead specialized in building products users love. Today, I manage & secure big data in the cloud. All views shared are my own.