当 Firebase 变量更改时更新 React Native Screen

Question

Hi I'm new to firebase and don't know how to make a screen in my react native app update when a certain firebase variable changes.

In my app's homescreen, a user's posts are fetched from firebase in componentDidMount , and then rendered:

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

In a separate screen, the user can choose to add a post and the firebase database is updated:

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

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

However, though the database is successfully changed, the homescreen doesn't update and show the newly added post till it is manually reloaded. How do I add a listener to the homescreen, so that when the posts database variable changes, the screen automatically updates.

Answer 1

If you want to share the same data between multiple screens, the best is to use Redux.

Using Redux, all your renders function (which needs a specific data from the store) will automatically refresh if a data is updated. That way, you can only handle one firebase listener to update your redux store.

I would create a "Post" reducer and dispatch an update action every time I got something new from the firebase listener.

// 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
  };
}

And the listener would be like:

import { update } from 'PostRedux.js'

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