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.
Ionic @ In3 Session 3 by David Plummer
A reducer is a pure function that's used to update and retrieve a portion of the application state. A reducer accepts…
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.
Below is a code 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:
Take a Look at Zero Boilerplate NgRx For State Management
Tue, Apr 10, 2018, 6:30 PM: Angular ngrx-datahttps://github.com/johnpapa/angular-ngrx-dataThis is a project from John…
A DC SPACE DEDICATED TO INCLUSION, INNOVATION & INCUBATION
Committed to creating a collaborative environment where under-resourced members have access to the space & services to…
Washington Ionic Meetup
The Washington DC Ionic Framework Meetup
This is a group for anyone interested in the Ionic Framework for web and mobile application development, including PWAs…
NgRx Repo & Documentation