When I started my latest side-project half a year ago I had to choose how to manage and persist the state of Avocation a React Native App I built.
I decided to use MobX for its simplicity and my experience with it. Setting up MobX and managing my apps state was easy like always, but at some point I needed some intuitive way of persisting my stores.
After some research I found mobx-persist, a great library to solve my problem with a simple API which was easy to integrate into my existing code base.
mobx-persist works for React Native, as well as for Web.
First I will explain how to set-up mobx-persist in your existing application and afterwards how to persist your data with it.
How to set up mobx-persist
I will assume you already have your MobX app configured and running. If not, make sure to check out the following article about how to get started with MobX and React.
Getting Started with Mobx
In this tutorial, we are going to learn about Mobx which is an easier and simpler alternative to Redux (at least in my…
First, we install the npm package in our application
npm install -s mobx-persist
Now let’s assume we have three stores in our application
We need to create what is called a
hydrate function. This function tells
mobx-persist which stores you want to persist and how to save them. All of the observables will be restored, once the user re-opens the app or refreshes your web application.
If you are using React Native, you need to make sure to set the
storage to AsyncStorage and
jsonify:true in the
create function, to let mobx-persist know what to use for persisting the observables locally. If you are developing a web application, you can skip these parameters to use
localStorage or use a custom local storage library like localForage.
hydrate function accepts the following parameters
key- This will be the key used by AsyncStorage for the serialised store
store- The store you want to persist
initialState- An optional initial state
customArgs- Custom arguments for serializr (See documentation)
Make sure to display some loading UI while the state hydration is running, because you want to avoid to render your application with faulty data.
That’s why I combined all the
hydrate promises and called the
finishLoading() function after all of them are resolved. In this function you can set the loading state to “finished” and start rendering your application content.
In the example above you can see, that I combined all of the stores into a single class. In your
index.js you can then spread this class into props for your
<Provider> ,and your application will just work like before.
How to use mobx-persist
After we finished the configuration, we can start persisting our stores!
AuthStore we want to save the
authToken to keep the user logged in. So we create the store and add the observable:
This works fine, until the user restarts your app or refreshes your web application. If you do not persist the
authToken ,the user will need to log in again, which we wanted to avoid.
To persist this observable we simply add a
persist to it:
When you update the observable variable, which is marked with
persist, mobx-persist will automatically save the change using AsyncStorage.
If the application got closed and the user opens it again later, the state will be restored after the hydration is finished.
For all primitive JS types a simple
persist will be sufficient. For more complex types like objects, arrays, and maps you need to give mobx-persist more information about the observable.
You can even add some time delay between updating the observable and persisting these updates.
This can be configured when you create your
I used mobx-persist with great success in my latest side-project, even though the library is unmaintained for some time now. There is also another library which is a bit more active called mobx-sync. In my opinion, mobx-persist has the most convenient API and is very simple to set up.
Try both libraries and see what works best for you!