I am using redux-persist in an Expo managed RN app and using localStorage
import storage from 'redux-persist/lib/storage'
As per the config below, this stores the state in local storage with key root.
const persistConfig = {
key: 'root',
storage,
}
I would like to periodically save this state to a remote server with a timestamp and use that saved state only when the local state is either stale or not present.
The use case is that device data is backed up on server and when the user changes their device or logs in from a different device they can restore the app state from remote server.
Note: I do not want a real time storage like Firebase or Realm. All the data is used from local device but only periodically saved to remote, it is OK for the backed up data to be somewhat behind the local copy. (Think of it like WhatsApp backup to Google Drive, which is sporadic, periodic)
I am thinking of using Expo AppLoading component to fetch and save this local storage e.g. in App.js
render() {
if (!this.state.isLoadingComplete) {
return (
<AppLoading
startAsync={this._syncFromRemoteAsync}
onError={this._handleLoadingError}
onFinish={this._handleFinishLoading}
/>
);
} else {
return (
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<View style={styles.container}>
<AppNavigator />
</View>
</PersistGate>
</Provider>
);
}
}
Now in the _syncFromRemoteAsync function, I am planning to make an API call to my server, check the timestamp and compare with the root keyed local storage and if the remote data is not present or stale then upload the local storage to remote server OR if the local storage is stale or not present then download and overwrite the local storage.
Two very related questions
For this kind of simple use case, is there an easier/better solution?
How do I access the local storage saved by redux-persist/lib/storage?