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.