Как я могу запустить свои асинхронные функции по порядку в React-Native?

У меня есть такое действие:

export const loginUser = ({ email, password }) => {
  return (dispatch) => {
    dispatch({ type: LOGIN_USER });

    firebase.auth().signInWithEmailAndPassword(email, password)
      .then(user => {
        const { currentUser } = firebase.auth();
        firebase.database().ref(`users/${currentUser.uid}/userInfo`)
        .on('value', snapshot => {
          const userInfo = _.map(snapshot.val(), (val, uid) => {
            return { ...val, uid };
          });
          console.info(userInfo);
          dispatch({ type: USERINFO_FETCHED, payload: userInfo });
        });

        Actions.main();

        dispatch({
          type: LOGIN_USER_SUCCESS,
          payload: user
        });
      })
      .catch(() => {
        dispatch({
          type: LOGIN_USER_FAIL,
        });
      });
  };
};

Эти функции выполняются неупорядоченно, потому что это асинхронные функции. Хорошо, мы все это знаем. Я хочу привести в порядок эти функции. Прежде всего, я хочу запустить и закончить эти коды:

const { currentUser } = firebase.auth();
        firebase.database().ref(`users/${currentUser.uid}/userInfo`)
        .on('value', snapshot => {
          const userInfo = _.map(snapshot.val(), (val, uid) => {
            return { ...val, uid };
          });
          console.info(userInfo);
          dispatch({ type: USERINFO_FETCHED, payload: userInfo });

и после их завершения я хочу запустить эту строку:

Actions.main();

Это возможно? Я не мог этого сделать. Спасибо за ваши ответы...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
39
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вам нужно научиться использовать промисы. Ниже приведен хороший учебник по последовательному выполнению промисов. Заключите свои методы в промисы и запустите их Promise.all.

https://decembersoft.com/posts/promises-in-serial-with-array-reduce/

Ответ принят как подходящий

Легко исправить, попробовав что-то вроде Actions.main(); этого внутри .on('value'.

export const loginUser = ({ email, password }) => {
  return (dispatch) => {
    dispatch({ type: LOGIN_USER });

    firebase.auth().signInWithEmailAndPassword(email, password)
      .then(user => {
        const { currentUser } = firebase.auth();
        firebase.database().ref(`users/${currentUser.uid}/userInfo`)
        .on('value', snapshot => {
          const userInfo = _.map(snapshot.val(), (val, uid) => {
            return { ...val, uid };
          });
          console.info(userInfo);
          dispatch({ type: USERINFO_FETCHED, payload: userInfo });
          Actions.main();
        });
        dispatch({
          type: LOGIN_USER_SUCCESS,
          payload: user
        });
      })
      .catch(() => {
        dispatch({
          type: LOGIN_USER_FAIL,
        });
      });
  };
};

Ааа так просто, моя вина.. Спасибо

Serdar Gun 04.03.2019 00:07

Другие вопросы по теме