Обновлять собственный экран React при изменении переменной Firebase - PullRequest
Новая
       10

Обновлять собственный экран React при изменении переменной Firebase

0 голосов
/ 05 мая 2020

Привет, я новичок в firebase и не знаю, как сделать экран в моем ответном обновлении собственного приложения при изменении определенной переменной firebase.

На главном экране моего приложения сообщения пользователя выбираются из firebase в 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
    });

Однако, хотя база данных успешно изменена, домашний экран не обновляется и не отображает недавно добавленный пост, пока он не будет перезагружен вручную. Как добавить слушателя на рабочий стол, чтобы при изменении переменной базы данных сообщений экран автоматически обновлялся.

1 Ответ

0 голосов
/ 06 мая 2020

Если вы хотите использовать одни и те же данные между несколькими экранами, лучше всего использовать Redux.

Используя Redux, все ваши функции рендеринга (для которых требуются определенные c данные из магазина) будут автоматически refre sh, если данные обновлены. Таким образом, вы можете обрабатывать только один слушатель firebase для обновления вашего хранилища redux.

Я бы создал редуктор «Post» и отправлял бы действие обновления каждый раз, когда я получал что-то новое от слушателя firebase. 

// 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()));
    });
...