在React Native / Redux中处理异步请求

Question

I'm using firebase to build an app with react native. I'm struggling with how I should structure my redux actions within my app.

As is stands I have a function that will fetch a users profile. I make a reference to the firebase firestore and then use then and catch statements to resolve the promise returned. Here is where my problem comes into it.

return(dispatch){
dispatch({type: GET_PROFILE})
var docRef = firebase.firestore().doc('users/' + userUid);
docRef.get()
.then(() => {
    dispatch({type: GET_PROFILE_SUCCESS})
})
.catch(() => {
   dispatch({type: GET_PROFILE_FAIL})
})
}

I am dispatching the action GET_PROFILE so that when my render function is called in my profile screen, it will load a spinner while the user waits. The problem I've got is that if the user isn't connected to the internet. When they make the request, the action is sent to redux but GET PROFILE SUCCESS / FAIL is never dispatched, as having no internet connection isn't an error

As a result all the user sees is a spinner until they restart the app. I basically want to alert the user that they need a connection to the internet. I'm new to react native, Could someone advise me what's the best way to do this in react native?

Thanks

Answer 1

You can use this piece of code for network fail condition

return(dispatch){
    dispatch({type: GET_PROFILE})
    var docRef = firebase.firestore().doc('users/' + userUid);
    docRef.get()
    .then(() => {
        dispatch({type: GET_PROFILE_SUCCESS})
    }, 
      // ADD THESE LINES
      (error) => {
            dispatch({type: GET_PROFILE_FAIL})
          })
    .catch(() => {
       dispatch({type: GET_PROFILE_FAIL})
    })
    }

Answer 2

You can get network informations with NetInfo and store it in redux :

In your main component :

componentDidMount() {
    NetInfo.isConnected.fetch().then((isConnected) => {
      store.dispatch({ type: 'CHANGE_CONNECTION_STATUS', isConnected });
    });
    NetInfo.isConnected.addEventListener('connectionChange', this.handleConnectionChange);
}

componentWillUnmount() {
    NetInfo.isConnected.removeEventListener('connectionChange', this.handleConnectionChange);

handleConnectionChange = (isConnected: boolean) => {
    store.dispatch({ type: 'CHANGE_CONNECTION_STATUS', isConnected }));
}

Then you can wrap your request with an if statement to handle offline use cases :

return(dispatch){
  if(store.getState().isConnected) {
    dispatch({type: GET_PROFILE})
    var docRef = firebase.firestore().doc('users/' + userUid);
    docRef.get()
    .then(() => {
        dispatch({type: GET_PROFILE_SUCCESS})
    })
    .catch(() => {
       dispatch({type: GET_PROFILE_FAIL})
    })
  } else {
    Alert.alert('You are offline');
  }
}