onSnapshot is returning empty querysnapshot until the app is reloaded

My onSnapshot() function is returning a blank querysnapshot until I reload the app.

When the component mounts I am calling an action which calls the firestore database.

component

componentDidMount() {
    const { uid } = this.props.user;
    this.props.imagesToBuy(uid);
  }

Action creator

export const imagesToBuy = (uid) => {
  return (dispatch) => {
    dispatch({ type: LOADING_IMAGES_TO_BUY });

    db.collection('users')
    .doc(uid)
    .collection('images_to_buy')
    .onSnapshot((querySnapshot) => {
      dispatch({
        type: GET_IMAGES_TO_BUY,
        payload: querySnapshot
      });
    });
  };
};

redux store

case GET_IMAGES_TO_BUY:
    console.log(action.payload);
    return { ...state, imageToBuyList: action.payload };

When I initially load the app the console.log is empty

Then when I reload the app and use it subsequently in dev mode its console.log is correct and contains the correct data.

I am using:

"react": "16.4.1", "react-native": "^0.56.0" "react-native-firebase": "^4.3.8", "react-redux": "^5.0.7", "redux": "^4.0.0",