title: waiting for dispatch to finish in actions
body: <p>I have a function that loads user data from firebase real time database. The function calls the action that loads the data in the main loading screen (in <code>componentDidMount</code>). The problem is that the loading page navigates to the main screen before loading is done (data fetch from firebase and dispatch). </p>
  
  <p>The functions that is being called at the beginning of the app run:</p>
  
  <pre><code>async componentDidMount(){
  ....
  
       if (facebookToken !== null){
          await this.props.loadData();
          this.props.navigation.navigate("MainScreen"); 
  ....
      }
  </code></pre>
  
  <p>and the action that is being called:</p>
  
  <pre><code>export const loadData = () =&gt; async dispatch =&gt; {
  
      firebase.auth().onAuthStateChanged((user) =&gt; {
      dispatch({ type: SAVE_USER, payload: {prop: "uid", value: user.uid}});
      firebase.database().ref(`/users/${user.uid}`)
              .once('value', snapshot =&gt; {
                dispatch({type: UPDATE_CREDENTIALS, payload: { prop: "phone", value: snapshot.val().phone}});
                dispatch({type: UPDATE_CREDENTIALS, payload: { prop: "country", value: snapshot.val().country}});
                dispatch({ type: SAVE_USER, payload: {prop: "name", value: snapshot.val().name}});
                dispatch({ type: SAVE_USER, payload: {prop: "fbPicture", value: snapshot.val().photo}});
              })
            }
    });
  
  ...
  }
  </code></pre>
  
  <p>I can't seem to find the solution that works so that data call is done before it continues to navigate to <code>MainScreen</code></p>