时间戳

首页 > 解决方案 > 如何使用 onSnapshot 通过 Redux 更新 props

javascript - 如何使用 onSnapshot 通过 Redux 更新 props

问题描述

我正在学习如何编码，我真的在努力解决以下问题：

我正在构建一个聊天应用程序，我需要在提交新消息后立即显示它们。于是，我想到了使用onSnapshot()。每次我在基本的一页练习中使用 onSnapshot() 时，它都有效。但是，现在我有一个包含 3 个文件夹（src；public；functions）的项目。对于我的所有功能，我使用 this.props.functionName() 获取/发送数据并使用 Redux 管理状态，然后后端将返回一个承诺。

我的问题是，我如何使用 onSnapshot 来更新我的道具，因为我不能调用函数也不能使用 return。

我尝试直接在组件中使用 admin sdk，但 firebase 在控制台中发出警告说我应该只在后端使用它。

基本上，如何在不调用函数的情况下将以下数组发送到我需要发送到的组件？

exports.messages = (req, res) => {
    db.collection('messages').onSnapshot(snapshot => {
        let messages = [];
        snapshot.forEach(doc => {
          messages.push(doc.data())
        });
      })
}

提前致谢！

标签： javascriptreactjsfirebasereduxgoogle-cloud-firestore

解决方案

您可以在本教程中找到一种更新可能适合您的 firebase 道具的方法。他们使用的示例代码是：

useEffect(() => {
  const unsubscribe = props.firebase
    .db.collection('myCollectionName')
    .onSnapshot(snapshot => {
      if (snapshot.size) {
        // we have something
        ** Handle returned data **
      } else {
        // it's empty
      }
    })
return () => {
    unsubscribe()
  }
}, [props.firebase])

而另一个用于处理返回数据的：

let myDataArray = []
snapshot.forEach(doc =>
  myDataArray.push({ ...doc.data() })
)
setData(myDataArray)

推荐阅读