Firebase 实时数据库读取数据

Question

我正在使用 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)
                    })
            }
        ))
    }
}

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

Answer 1

当您等待多个异步操作完成时，解决方案通常是使用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
      }
    ))
  }
}

这里的主要变化：

• 现在使用once()来加载用户数据，所以它只加载一次并返回一个承诺。
• 使用Promise.all等待所有配置文件加载Promise.all 。
• 添加了地图以在内部回调中查找电子邮件地址。