Syncing Redux store with AsyncStorage in React Native

So you are creating a React Native app. And now you are at this stage that you wish to restore your large redux store with AsyncStorage, so that your app could restore itself to its previous state.

It is fairly simple to do it synchronously in browser but on mobile device, in react native AsyncStorage getItem method returns a promise and it’s a bit intimidating to regenerate the store and simultaneously register your app via AppRegistry. So I thought to write this solution to save your time. :)

There are some packages which you could use (eg: redux-persist), which is used in F8 app.
But for some reason I didn’t want to use that so this is what I did with a few lines of code:

index.android.js :

setup.js

When app state is changed, store the state in AsyncStorage. And when the root component is getting mounted, on its componentWillMount() method read state from AsyncStorage and create another state from it. Here I am using isStoreLoading variable to maintain this state and show loading state on UI, when store is loaded render Provider component:

AppNavigator.js