NgRx State Management with Inclusive Innovation Incubator - Clearly Innovative | Web and Mobile DevelopmentClearly Innovative | Web and Mobile Development

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 NgRxand 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. Below is the link to the slides;

 

 

 

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.

 

NgRX Screenshot

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

 

 

 

Below is a demonstration on how NgRx works:

 

To learn more about NgRx, follow the links below and stay tuned for future posts from Clearly Innovative where we will dive into specific implementation of each. If you happen to be in the DC Metro area, visit one of our meetUps at the Inclusive Innovation Incubator. Happy coding!

 

The next meetUp in the series:

https://www.meetup.com/The-Washington-Ionic-Framework-Meetup/events/248768531/

 

In3DC

http://in3dc.com

 

Washington Ionic Meetup

The Washington DC Ionic Framework Meetup

Washington, DC
54 Members

This is a group for anyone interested in the Ionic Framework for web and mobile application development, including  PWAs or Progressive Web Apps… This includes related techn…

Check out this Meetup Group →

 

NgRx Repo & Documentation

https://github.com/ngrx/platform/