时间戳

首页 > 解决方案 > Firebase 变量更改时更新 React Native Screen

javascript - Firebase 变量更改时更新 React Native Screen

问题描述

嗨，我是 firebase 的新手，当某个 firebase 变量发生变化时，不知道如何在我的 react 本机应用程序更新中制作屏幕。

在我的应用程序的主屏幕中，从 firebase in 获取用户的帖子componentDidMount，然后呈现：

componentDidMount = () => {
  this.setup();
};

setup = async () => {
  const { currentUser } = await firebase.auth();
  this.setState({ currentUser });

  await firebase
    .database()
    .ref("users/" + currentUser.uid + "/posts")
    .on("value", snapshot => {
      this.setState({posts: snapshot.val()})
    });
}

// render posts

在单独的屏幕中，用户可以选择添加帖子并更新 firebase 数据库：

addPost = async () => {
  const { currentUser } = firebase.auth();

  await firebase
    .database()
    .ref("users/" + currentUser.uid + "/posts")
    .push({
      post: // data for post
    });

但是，尽管数据库已成功更改，但在手动重新加载之前，主屏幕不会更新并显示新添加的帖子。如何在主屏幕上添加一个监听器，以便当帖子数据库变量更改时，屏幕会自动更新。

标签： javascriptfirebasereact-nativefirebase-realtime-database

解决方案

如果你想在多个屏幕之间共享相同的数据，最好是使用 Redux。

使用 Redux，如果数据更新，您的所有渲染函数（需要来自 store 的特定数据）将自动刷新。这样，您只能处理一个 firebase 侦听器来更新您的 redux 存储。

每当我从 firebase 侦听器获得新内容时，我都会创建一个“发布”reducer 并调度一个更新操作。

// Actions
const ADD = 'post/ADD';
const UPDATE = 'post/UPDATE';

// Initial state
const initialState = {
  posts: [],
};

// Reducer
export default function reducer(state = initialState, action = {}) {
  switch (action.type) {
    case ADD:
      return {
        ...state,
        posts: [...state.posts, action.post]
      };
    case UPDATE:
      return {
        ...state,
        posts: action.posts
      };
    default:
      return state;
  }
}

// Action Creators
export function addPost(post) {
  return {
    type: ADD,
    post
  };
}

export function updatePosts(posts) {
  return {
    type: UPDATE,
    posts
  };
}

听众会是这样的：

import { update } from 'PostRedux.js'

firebase
    .database()
    .ref("users/" + currentUser.uid + "/posts")
    .on("value", snapshot => {
      Store.dispatch(update(snapshot.val()));
    });

推荐阅读