Firebase实时数据库读取数据

debugcn 发表于 Dev

菲利普

我正在使用React + Redux和Firebase的实时数据库来构建类似于Messenger的东西。

我习惯从这样的API检索数据：

export const fetchContacts = () => {
    return async dispatch => {
        dispatch(fetchContactsStart());

        try {
            const response = await axios.get('....');

            dispatch(fetchContactsSuccess(...));
        } catch(e) {
            dispatch(fetchContactsFail(...));
        }
    }
}

现在在firebase中，我具有以下数据：在此处输入图像描述

我需要获取所有用户联系人，然后获取与这些联系人相关联的用户信息，并建立一个结构，例如：[{email：...，username：...}，{email：...，username：.. 。}，...]。以该格式获取所有数据后，我想将操作分派给我的减速器。

现在，我有以下代码：

export const fetchContacts = () => {
    return dispatch => {
        dispatch(fetchContactsStart());

        const userEmail = firebase.auth().currentUser.email;
        let data = [];

        firebase.database().ref(`users_contacts/${Base64.encode(userEmail)}`)
            .on('value', contacts => contacts.forEach(contact => {
                firebase.database().ref(`users/${Base64.encode(contact.val().contact)}`)
                    .on('value', user => {
                        data.push({ email: contact.val().contact, username: user.val().username });
                        console.log(data)
                    })
            }
        ))
    }
}

这行得通，但我不知道仅在数据完全形成后才如何调度操作，对此有什么解决方案吗？谢谢您的帮助！

弗兰克·范普菲伦

当您等待多个异步操作完成时，通常使用解决方案Promise.all。在这种情况下，看起来像这样：

export const fetchContacts = () => {
  return dispatch => {
    dispatch(fetchContactsStart());

    const userEmail = firebase.auth().currentUser.email;
    let data = [];

    firebase.database().ref(`users_contacts/${Base64.encode(userEmail)}`).once('value', contacts => {
      let promises = [];
      let map = {};
      contacts.forEach(contact => {
        const contactId = Base64.encode(contact.val().contact);
        map[contactId] = contact.val().contact;
        promises.push(firebase.database().ref(`users/${contactId}`).once('value'));
      });
      Promise.all(promises).then((users) => {
        users.forEach((user) =>
          data.push({ email: map[user.key], username: user.val().username });
        })
        // TODO: dispatch the result here
      }
    ))
  }
}

这里的主要变化：