Ionic State Management with Inclusive Innovation Incubator

The Inclusive Innovation Incubator (In3) hosted the first of a series of events this week demonstrating the use of state management tools such as MobX and NgRx, hosted by Aaron Saunders. Though these tools are not designed specifically for Angular, the presentation was structured around integrating these tools into Ionic and Angular 2+ as these are Aaron’s and Clearly Innovative’s frameworks of choice.

Both tools are made to give developers a consistent pattern for integrating two currently popular programming paradigms. The first is reactive programming which, simplistically and with Angular in mind, is the act of designing components that listen to changes in your code and react accordingly.

The second is state management. When we refer to state we are basically just talking about all the data our app uses during its lifecycle and the variables that store said data. If we focus too much on other parts of our application when developing, we often end up with many variables in different components, forcing us to pipe data back and forth between components, maybe from list view to detail view back to list view.

What developers are doing is managing all the variables our app will use in one object, in one central location. This makes the handling of data a breeze. On top of this, though the tools Aaron talked about don’t specifically enforce it, a good practice is to maintain the immutability of your state (ie overwrite the whole object whenever there’s a change, don’t just update the properties). Forcing immutability saves you or someone on your team the time it takes to track down a callously changed property.

With MobX and NgRx, you can write components that will listen to pieces of your store and respond to changes automatically. After setting up your views and hooking them up to your store, all you need to think about is updating your state.

Here is the sample MobX code shown during the presentation. The next session will be more of a hands on lab with MobX and MobX-State-Tree.

To learn more about MobX and 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


Washington Ionic Meetup

MobX docs

NgRx Repo & Documentation

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