How and where can I save the entire redux store with AsyncStorage

Question

I was wondering if I need to do something like this to save the entire store of my application using AsyncStorage in my responsive application and check if it exists when the application starts.

var store; _loadInitialState = async () => { try { var value = await AsyncStorage.getItem(STORAGE_KEY); if (value !== null){ store = value; console.log('Recovered selection from disk: ' + value); } else { store = configureStore({}); console.log('Initialized with no selection on disk.'); } } catch (error) { console.log('AsyncStorage error: ' + error.message); } }; export default class App extends Component { componentWillMount(){ this._loadInitialState().done() } render(){ return( <Provider store={store}> <AppContainer/> </Provider> ) } } 

This does not work, but I hope you understand this idea.

Answer 1

Use redux-persist , so you don't need to use AsyncStorage directly.

Answer 2

Yes, this is one of the ways your application can get its status from AsyncStorage . However, the way you want to process the data depends on the application and on the data itself.

Personally, I try not to save the entire app store. Some sections of your application may need to be reused when navigating between scenes, it makes no sense to keep this in AsyncStorage . The same goes for the current scene and similar data that should be stored in the redux store, but will probably be reset when the application restarts.

Regarding data storage in AS, I would recommend redux middleware . Intercept the necessary actions and make AsyncStorage.setItem() . I think it’s ok to do this elsewhere, for example, in component code. It is not so clean, but it is to your taste, really. Key note - I just store different datasets in different AsyncStorage keys. Thus, you process less data for each store update (not the entire state tree, but only for this section). The middleware code will look something like this:

 export default store => next => (action) => { let result = next(action) switch (action.type) { case THE_ACTION_THAT_REQUIRES_AN_ASYNCSTORAGE_UPDATE: AsyncStorage.setItem('@your_key', action.data_that_is_to_be_stored) break case ANOTHER_ACTION: // similar here break default: break } return result } 

Please note that here you do not need to do await , since in most cases it is normal to write data asynchronously (if you are not going to read and use them immediately, which should not be if you use reduction)

As for launching the application, you can use AsyncStorage.multiGet to immediately get all the keys and put them in the store. Following the RN docs :

 AsyncStorage.getAllKeys((err, keys) => { AsyncStorage.multiGet(keys, (err, stores) => { stores.map((result, i, store) => { let key = store[i][0] let value = store[i][1] // add your data to redux store }) }) }) 

As soon as you read AsyncStorage and get the data, it makes sense to combine it into a pre-loaded state object that will look like your application store and install the Redux repository in one step. You can name it APP_STATE_INIT , pass the newly merged object, and catch the action in your reducers that need to use data. Thus, you will have only one action to rehydrate your state when the application starts.

You will probably need some loading state that will affect the display of the bootloader until the AS values ​​are retrieved and the data is populated in the abbreviation store. But overall you are right, you can set AsyncStorage init and wait time to componentWillMount

 ... async componentWillMount() { await _loadInitialState() this.setState({ isLoading: false }) } ... 

If you think that everything is in order for your application to save everything and boot based on this, do not hesitate to use one of the packages, which provides an easy way to rehydrate the application store from the store. I would just note the potential impact on productivity and the fact that in this way you lose control over what is happening.