React Native Firebase Redux - When to load user data?

Question

I am working on my first RN app and had some basic questions on data loading.

I am using Firebase as my backend and was curious if there was a better solution to loading the user data and saving/persisting the user data upon login.

Right now my process is:

When the user logs in and hits the home page, a callout to Firebase happens, we grab the data from Firebase and save the data as a string in AsyncStorage as well as in the state via Redux.

I then turn that string into an object and pull out the values as needed throughout the app. If a user needs to edit the data, I will update the values in AsyncStorage, Redux, and then update Firebase.

This feels like a lot of updating everywhere, I am curious if I should leave out the updates to Async storage and just leave that for user sign in/logout? Or is this best practice with handling data throughout the app?

I am specifically looking for best practices with loading user data

Some code:

import {AsyncStorage} from 'react-native'; 
import CreateDataContext from './CreateDataContext';
import config from '../config';
import {navigate } from '../NavigationRef';

const authReducer = (state, action) => {
  switch(action.type){
    case 'add_error':
        return {...state, errorMessage: action.payload};
    case 'sign_up':
        return {errorMessage: '', token: action.payload};
    case 'signed_in':
        return {errorMessage: '', auth: action.payload};
    case 'signed_out':
        return {token: null, errorMessage: '', auth: action.payload};
    case 'clear_error_message':
        return {...state, errorMessage: ''};
    case 'user_data':
        return {...state, userData: action.payload};
    default: 
        return state;
  };
};

const getAllUserData = (dispatch) => { 
return async (userId)=>{
    try{
        const response = await config.grabUserData(userId); //this returns a nested object of user data 
        await AsyncStorage.setItem('userData', JSON.stringify(response)); 
        await AsyncStorage.setItem('uid', userId);
        dispatch({type: 'user_data', payload: JSON.stringify(response)});
    } catch(e){
        dispatch({type: 'add_error', payload: '' + e});
    }
}
};

Answer 1

This kind of thing is a bit subjective: it depends on your application's type, needs, and developer preferences. However, I would suggest that if you are manually setting lumps of data in AsyncStorage, you're probably reinventing the wheel and could likely benefit from projects such as @redux-offline which handle the saving of application state for you. To a large extent this should allow you to concentrate on maintaining correct state in Redux, and not worry so much about copying back and forth to/from AsyncStorage.