NgRx State Management with Inclusive Innovation Incubator

We had a terrific State Management with Ionic & Angular2+ meetUp at the Inclusive Innovation Incubator. The series was led by Lead Developer, David Plummer, who guided the audience through a hands-on session of using NgRx and MobX.

In our last meetUp, we provided a high-level overview of NgRx and MobX, two Angular libraries for state management. In this meetUp, participants were immersed in the intricacies of NgRx state management.

Before NgRx

At Clearly Innovative, we initially made use of services to handle several states within our applications. Every component had to explicitly call the service it needed, in order to get the current object state within the application lifecycle.

We also used event handlers and Event Emitters to pass data from a parent component to a child component or vice versa. Afterwards we’d explicitly make changes based on the received data or value. This was our approach to State Management.

Why Switch to NgRx?

We switched to NgRx for two main reasons: automated UI changes based on actions, and effective bug tracking. We wanted something that automatically tells a component “what to do”. The component UI or state should change by itself based on the current application state or lifecycle. As updates are made to the store (where all objects of an application are stored, usually called the “single source of truth”), the component(s) should already know how to behave without having to change the component state.

NgRx effectively allows you to debug your application by tracking individual events for actions performed. Using Redux DevTools (we HIGHLY recommend this for state management with any of the angular libraries mentioned), updates are easily traceable with one click. For example, if there is an update in the state tree, and the user interface (UI) does not reflect this change, we can easily open up the redux dev tool and check if the update ever happened.

Screenshot on how redux dev tools keeps track of your application state and actions performed.

Below is a code demonstration on how NgRx works:

DC based software agency utilizing #Javascript, #Typescript, #HTML5, #Ionicframework, #NodeJS, #Firebase to build web & mobile solutions.

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