Question

我有一个这样的动作：

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.log(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.log(userInfo);
          dispatch({ type: USERINFO_FETCHED, payload: userInfo });

完成后，我要运行以下行：

Actions.main();

有可能吗？我做不到谢谢您的回答...

Answer 1

您需要学习如何使用承诺。下面是关于promise的串行执行的一个很好的教程。将您的方法包含在Promise中并运行Promise.all。

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

Answer 2

可以轻松解决，在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.log(userInfo);
          dispatch({ type: USERINFO_FETCHED, payload: userInfo });
          Actions.main();
        });
        dispatch({
          type: LOGIN_USER_SUCCESS,
          payload: user
        });
      })
      .catch(() => {
        dispatch({
          type: LOGIN_USER_FAIL,
        });
      });
  };
};

Answer 3

如果您想返回Actions.main()的值后想运行userInfo，可以将Actions.main()移到代码块中，如下所示。

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.log(userInfo);
          dispatch({ type: USERINFO_FETCHED, payload: userInfo });

          Actions.main();
          dispatch({
            type: LOGIN_USER_SUCCESS,
            payload: user
          });

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

如何在React-Native中按顺序运行异步功能？

3 个答案: