Правильный способ подписаться на изменения в реальном времени на Firestore с React

Question

Я только начал окунуться в использование Firestore с React. Я хочу получить более полное представление о возможностях базы данных в реальном времени, предлагаемых Firestore.

Ниже приведены мои фрагменты кода в каждом соответствующем файле:

UserComponent.js

import React, { Component } from 'react'

class UserPage extends Component {
  constructor (props) {
    super (props)
    this.state = {
      users: []
    }
  }

  componentDidMount () {
    this.props.firebase.getUsers()
    .then(doc => {
      console.log('componentDidMount', 'Data Received')
      this.setState({ users: doc })
    }
  }

  render () {
    const { users } = this.state
    return (
      <div>
        <h1>Users</h1>
        <hr />
        <table>
          <thead></thead>
          <tbody>
            { users.map (user => (
                <tr key={user.uid}>
                  <td>{ user.uid }</td>
                  <td>{ user.name }</td>
                </tr>
              ))
            }
          </tbody>
        </table>
      </div>
    )
  }
}

Firebase.js

import app from 'firebase/app'
import 'firebase/auth'
import 'firebase/database'
import 'firebase/firestore'

const config = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_DATABASE_URL,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID 
}

class Firebase {
  constructor (props) {
    app.initializeApp(config)
    this.auth = app.auth()
    this.db = app.database()
    this.firestore = app.firestore()
  }

  getUsers = () => {
    return new Promise((resolve, reject) => {
      this.firestore.collection("users")
      .onSnapshot((snapshot) => {
        console.log('onSnapshot Called!')
        let updatedData = snapshot.docs.map(doc => doc.data())
        resolve(updatedData)
      }, reject)
    })
  }
}

Когда я иду прямо в базу данных пожарного магазина, изменяю существующую запись пользователя, файл console.log, который я поместил вgetUsers метод сразу после срабатывания onSnapShot. Снимок также содержит набор обновлений записи пользователей на нем.

Возможно, я что-то здесь упускаю (или неправильно реализовал), так как эти данные никогда не доходят до компонента User. Я ищу несколько советов, чтобы убедиться, что когда коллекция пользователей в моей базе данных firestore изменилась, прослушиватель сработает, и обновленные данные будут отражены в пользовательском компоненте моего приложения.

Другой вопрос, который у меня есть, заключается в том, чтов исходной базе данных Firebase RealTime есть метод off, который используется для отмены подписки на изменения. Что будет аналогом этого в Firestore? Я предполагаю, что это должно быть помещено в ComponentWillUnmount компонента React?

Спасибо,

Answer 1

ваш Firebase.js должен:

import app from 'firebase/app'
import 'firebase/auth'
import 'firebase/database'
import 'firebase/firestore'

const config = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_DATABASE_URL,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID 
}



const firebase = app.initializeApp(config)
const auth = app.auth()
const db = app.database()
const firestore = app.firestore()

export const getUsers = () => {
    return new Promise((resolve, reject) => {
      firestore.collection("users")
      .onSnapshot((snapshot) => {
        console.log('onSnapshot Called!')
        let updatedData = snapshot.docs.map(doc => doc.data())
        resolve(updatedData)
      }, reject)
    })
  }

ваш UserComponent.js должен быть:

import React, { Component } from 'react';
import {getUsers} from './firebase';

class UserPage extends Component {
  constructor (props) {
    super(props);
    this.state = {
      users: [],
    }
  }

  componentDidMount(){
    getUsers().then(doc => {
      console.log('componentDidMount', 'Data Received');
      this.setState({ users: doc });
    })
  }
  render(){
    const { users } = this.state
    return (
      <div>
        <h1>Users</h1>
        <hr />
        <table>
          <thead></thead>
          <tbody>
            { users.map (user => (
                <tr key={user.uid}>
                  <td>{ user.uid }</td>
                  <td>{ user.name }</td>
                </tr>
              ))
            }
          </tbody>
        </table>
      </div>
    )
  }
}

export default App;

Вы также должны импортироватьКомпонент UserPage к вашему App.js и добавьте его, чтобы он отображался в приложении, или вы можете отобразить UserPage непосредственно в первичном файле index.js.