ожидание отправки, чтобы закончить в действиях

Question

У меня есть функция, которая загружает пользовательские данные из базы данных Firebase в реальном времени. Функция вызывает действие, которое загружает данные на главном экране загрузки (в componentDidMount). Проблема в том, что страница загрузки переходит на главный экран перед загрузкой (выборка данных из базы данных и диспетчеризация).

Функции, вызываемые в начале работы приложения:

async componentDidMount(){
....

     if (facebookToken !== null){
        await this.props.loadData();
        this.props.navigation.navigate("MainScreen"); 
....
    }

и вызываемое действие:

export const loadData = () => async dispatch => {

    firebase.auth().onAuthStateChanged((user) => {
    dispatch({ type: SAVE_USER, payload: {prop: "uid", value: user.uid}});
    firebase.database().ref(`/users/${user.uid}`)
            .once('value', snapshot => {
              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}});
            })
          }
  });

...
}

Кажется, я не могу найти решение, которое работает так, чтобы вызов данных выполнялся до того, как он продолжит переходить к MainScreen

Answer 1

• Определите избыточную переменную состояния, называемую loadInProgress, и установите для нее значение true.
• Установите для loadInProgress значение false, если загрузка данных завершается успешно ('LOAD_SUCCESS).Я не уверен, что вы хотите сделать, если он потерпит неудачу ('LOAD_FAIL')
• В 'render', отметьте 'this.props.loadInProgress' и перейдите на другой экран, если он ложен.
• Если вы получаете сообщение об ошибке «Не удается обновить во время существующего перехода состояния», перенесите эту проверку в componentDidUpdate

Answer 2

хорошо, я нашел решение :)

Я добавил оператор .then в вызов действия так:

async componentDidMount(){
....

 if (facebookToken !== null){
    await this.props.loadData().then(() => {
    this.props.navigation.navigate("MainScreen");  })


....
    }

и В действии я обернул вызов функции с помощью return new Promise() и используется resolve() после выполнения всех вызовов диспетчеризации:

  return new Promise( (resolve, reject) => {
    firebase.auth().onAuthStateChanged((user) => {
       dispatch({ type: SAVE_USER, payload: {prop: "uid", value: user.uid}});
       firebase.database().ref(`/users/${user.uid}`)
                 .once('value', snapshot => {
                   if (snapshot.val() !== null){
                      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}});
                    }
                    resolve();
                });
       });
  })