React Native Firebase 根据其他用户的操作实时更新所有用户的信息答案

【问题标题】：React Native Firebase update information for all users in real time based on other users actionsReact Native Firebase 根据其他用户的操作实时更新所有用户的信息
【发布时间】：2020-10-16 18:34:35
【问题描述】：

您好，我目前正在尝试使用 react native、redux 和 firebase 将用户添加到页面。当用户 1 单击加入时，他们会被添加到提要中，其他用户也是如此。但是，我面临的一个问题是，当用户 2 单击加入时，他们会被添加到提要中，但不会显示在用户 1 的页面上，除非用户 1 在离开后重新关注页面。

这是我在本机反应中页面本身的代码

import React, { Component } from 'react';
import { Text, View, Button, TouchableOpacity, SafeAreaView, ScrollView, Image  } from 'react-native';
import styles from '../styles.js'
import { connect } from 'react-redux'
import { FlatList } from 'react-native-gesture-handler';
import { FontAwesome5 } from '@expo/vector-icons'; 
import { Octicons } from '@expo/vector-icons'; 
import { FontAwesome } from '@expo/vector-icons'; 
import { addUser, removeUser, getLivingRoomUsers } from '../actions/livingRoomUser.js'
import { bindActionCreators } from 'redux'


class LivingRoom extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        inRoom: false,
        isMuted: false
    };
  }
  componentDidMount(){
    this._unsubscribe = this.props.navigation.addListener('focus', () => {
      this.props.getLivingRoomUsers()
    });
  }

  joinRoom = () => {
    this.props.addUser()
    this.setState({ inRoom: true });
  }
  leaveRoom = () => {
    this.props.removeUser(this.props.livingRoomUser)
    this.setState({ inRoom: false });
  }
  ... 
  render(){
    return (
      <View>
        <SafeAreaView style={styles.livingRoomUserContainer}>
            <FlatList
          data={this.props.livingRoomUser.feed}

这是我对 redux 部分的操作代码：


export const addUser = () => {
    return async (dispatch, getState) => {
        try {
            const { user } = getState()
            const id = uuid.v4()
            const livingRoomUser = {
                id: id,
                avatar: user.avatar,
                username: user.username,
                isMuted: false,
                date: new Date().getTime(),
            }
            db.collection('livingroom').doc(id).set(livingRoomUser)
            dispatch({
                type: 'ADD_USER', payload: livingRoomUser
            })
            dispatch(getLivingRoomUsers())
        } catch (e) {
            alert(e)
        }
    }
} 


export const removeUser = (livingRoomUser) => {
    return async (dispatch, getState) => {
        try {
            db.collection('livingroom').doc(livingRoomUser.id).delete();
            dispatch(getLivingRoomUsers())
            //get living room users
        } catch (e) {
            alert(e)
        }
    }
} 

export const getLivingRoomUsers = () => {
    return async (dispatch, getState) => {
        try {
            const livingRoomUsers = await db.collection('livingroom').get()
            let array = []
            livingRoomUsers.forEach((livingRoomUser) => {   
                array.push(livingRoomUser.data())
            })  
            dispatch({
                type: 'GET_LIVING_ROOM_USERS', payload: orderBy(array, 'date', 'asc')
            })
        } catch (e) {
            alert(e)
        }
    }
}

总结一下。我希望在有人从页面中添加/删除自己时更新 getUsers。但是，从我的实现来看，当前的操作只会针对当前用户进行更新，并且提要仅在页面聚焦时才会更新。我该怎么办？

【问题讨论】：

标签： firebase react-native redux

【解决方案1】：

在firestore上使用onSnapshot监听器，然后您可以在商店更改时获取最新更新

export const getLivingRoomUsers = () => {
  return async (dispatch, getState) => {
    try {
      db.collection('livingroom').onSnapshot(snapshot => {
        let array = snapshot.docs.map(d => d.data());
        dispatch({
          type: 'GET_LIVING_ROOM_USERS',
          payload: orderBy(array, 'date', 'asc'),
        });
      });
    } catch (e) {
      alert(e);
    }
  };
};

【讨论】：