Не удается получить данные в реальном времени после удаления документа

Question

Я собираюсь добавить подобную функцию в приложение в React + Redux + Firebase. При нажатии «Мне нравится» (createLike) работает в реальном времени, но deleteLike не работает в реальном времени. При перезагрузке показывает «Мне нравится» после нажатия «Не нравится». Проблема в deleteDestory не работает асинхронно в Redux + Firestore .

Код: я определяю currentUser от пользователя Firestore и id выбирается из параметров. Пользователю нравится содержание каждой статьи.

  onLike = value => {
    const { id, currentUser } = this.props;
    if (value) {
      this.props.createLike(currentUser.uid, id);
    } else {
      this.props.deleteLike(currentUser.uid, id);
    }
  };

  renderLike = () => {
    const { like } = this.props;

      if (like.is_like) {
        return (
          <button
            className="like"
            onClick={() => this.onLike(true)}
          >
            <span>Like</span>
          </button>
        );
      } else {
        return (
          <button
            className="unlike"
            onClick={() => this.onLike(false)}
          >
            <span>Unlike</span>
          </button>
        );
      }
  };

Код Redux:

// Fetch like
export function fetchLike(id) {
  return dispatch => {
    firebase.auth().onAuthStateChanged(user => {
      if (user) {
        likesRef
          .where("uid", "==", user.uid)
          .where("cid", "==", id)
          .onSnapshot(function(querySnapshot) {
            if (querySnapshot) {
              querySnapshot.forEach(function(doc) {
                dispatch({ type: FETCH_LIKE, payload: doc.data() });
              });
            }
          });
      }
    });
  };
}

// Delete like
export function deleteLike(uid, cid) {
  return dispatch => {
    likesRef
      .where("uid", "==", uid)
      .where("cid", "==", cid)
      .get()
      .then(function(querySnapshot) {
        querySnapshot.forEach(function(doc) {
          doc.ref.delete();
        });
        dispatch({ type: DELETE_LIKE });
      });
  };
}

Редуктор:

import { FETCH_LIKE } from "../actions";

const initialState = {
  is_like: true
};

export default (state = initialState, action) => {
  switch (action.type) {
    case FETCH_LIKE:
      return action.payload;

    default:
      return state;
  }
};

Сложение

I добавьте createLike сюда.

// Create Like
export function createLike(uid, cid) {
  return dispatch => {
    likesRef
      .add({
        uid: uid,
        cid: cid,
        created_at: firebase.firestore.FieldValue.serverTimestamp()
      })
      .then(function() {
        dispatch({ type: CREATE_LIKE });
      });
  };
}

Answer 1

Я сделал это.

import { FETCH_LIKE, DELETE_LIKE } from "../actions";
const initialState = {
  is_like: true
};
export default (state = initialState, action) => {
  switch (action.type) {
    case FETCH_LIKE:
      return action.payload;
    case DELETE_LIKE:
      return { is_like: true };
    default:
      return state;
  }
};