在 react native / redux 中处理异步请求

Question

我正在使用 firebase 构建一个带有 react native 的应用程序。我正在为如何在我的应用程序中构建我的 redux 操作而苦苦挣扎。

就目前而言，我有一个可以获取用户个人资料的功能。我引用了 firebase firestore，然后使用 then 和 catch 语句来解决返回的承诺。这就是我的问题所在。

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})
})
}

我正在调度操作 GET_PROFILE，以便在我的个人资料屏幕中调用我的渲染函数时，它会在用户等待时加载一个微调器。 我遇到的问题是，如果用户没有连接到互联网。当他们发出请求时，动作被发送到 redux 但 GET PROFILE SUCCESS / FAIL 永远不会被调度，因为没有互联网连接不是错误

因此，用户在重新启动应用程序之前看到的只是一个微调器。我基本上想提醒用户他们需要连接到互联网。 我是 React Native 的新手，有人可以告诉我在 React Native 中做到这一点的最佳方法是什么？

谢谢

Answer 1

您可以通过NetInfo 获取网络信息并将其存储在redux 中：

在您的主要组件中：

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 }));
}

然后您可以使用 if 语句包装您的请求以处理离线用例：

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');
  }
}

Answer 2

您可以将这段代码用于网络故障情况

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})
    })
    }