React with MobX

MobX is a simple, scalable and battle tested state management solution. You can read more on getting started with MobX here
MobX integration with React has been a subject to some difficulty off late, especially after React 16.X update. After a lot of hunt and read, thought would put together a simple sample to make things easier. This integration gets even more trickier if we do decoration approach.

Let's start from a new app

1. npx create-react-app simplemobx
2. npm run eject, confirm eject process
3. npm i --dev @babel/plugin-proposal-decorators
4. npm i mobx mobx-react
5. set babel configuration in package.json to reflect the following

This is all the setup we need. Now, we start to build the store and consuming it
Create a new directory under simplemobx/src/components/stores
Add a new file to say simplemobx/src/components/stores/userstore.js
Copy the following contents

Store is now ready and should be hooked up to our app. We start with by adding Provider.
Open index.js
import needed files and setup provider. This is a critical piece for rest of the solution to work. Unless you have a provider MobX cannot inject data objects into our application

import { Provider } from "mobx-react";

import userStore from "./components/stores/userstore";

Next step is to enable Provider for app

Now that provider is available, we build on a consumer. When we say consumer, we can have different operations on it

1.  Simply consumes data
2.  Consumes and modifies data

For both cases, MobX injects data store objects in "props". We are then free to use it the way we use it, always. We don't need the complexity of "mapStateToProps" and "mapPropsToSate", "dispatch" and crazy wirings we do with "redux". This simplicity combined with scalability is what has made MobX to be a top state management choice for "react".

Consuming data
As you can see from the code above, we start start by importing needed packages

And then comes the famous decorators. All the magic (eject and babel changes)we did in the setup process was to help us move on with decorator style programming. Decorators allow for a lot of work done with single liner's. It helps in code brevity and helps to focus on application logic.

When we created our store model object, we created it with @observable and here, we use @observer. Meaning is straight forward to follow and nothing more needed. No fancy recursions, polling of any kind is needed
We also had @compute in the store. Anything that does not modify the store and does some sort of computation uses @compute keyword
Finally, when we head on to bigger applications, we'll have multiple stores. To ensure, we associate our component with right object @inject is used

Modify data
Let's build a simple form to add contents to our store object. We create a a simple form, on submission we push data into our datastore. Detailed code can be found in github.



We follow the same pattern as above. Import necessary modules into component, add @inject and @observe decorations. Once we have our data store object available in props, we can now use it and invoke functions like we do with regular object.

Code for the entire application can be found here

Stay tuned to do more on multi data store and scalability features on MobX

Here are some interesting articles/Videos on this subject
https://www.youtube.com/watch?v=76FRrbY18Bs
https://www.youtube.com/watch?v=pPgOrecfcg4