Firebase onSnapshot: отписаться от прослушивания всех пользователей, кроме того, кто внес изменения

Я использую реакцию js для работы с firebase.

поправьте меня, если я ошибаюсь, пожалуйста:

  • предположим, что на одной странице есть 1000 пользователей, и все они прослушивают изменения коллекции. если один из них, скажем, поставил один лайк сообщению, то все 1000 пользователей сделают запрос на чтение в firebase? (не финансово выгодно).

  • Чего я хочу добиться: просто слушайте изменения для пользователя, который внес изменения в коллекцию, и отпишитесь от прослушивания других, они увидят изменения только в том случае, если перезагрузят страницу.

можно ли реализовать такую ​​логику с firebase? заранее спасибо

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
28
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

В вашем случае вы не должны использовать прослушиватель Firestore. Вместо этого вы должны получить данные один раз с помощью useEffect и обновлять компонент только с помощью setState(), когда пользователю понравился пост. См. пример кода ниже:

const [value, setValue] = useState([])

const colRef = query(collection(db, "<collection>"))

// This will only get collection documents once.
// Needs to refresh/reload page to get updated data.
useEffect(() => {
  const getDataOnce = async () => {
    const querySnapshot = await getDocs(colRef);
    renderData(querySnapshot)
  }
  getDataOnce()
}, [])

// Handles the click button which updates the state.
// Renders updated value to only user who triggered this async function.
async function handleClick() {
  // Document reference to be updated.
  const docRef = doc(db, "<collection>", "<document-id>")
  // Updates the document reference.
  await updateDoc(docRef, {
      like: increment(1)
  })
  // Get the new updated data from the collection.
  const querySnapshot = await getDocs(colRef)
  // Sets the data to the `setValue` state.
  renderData(querySnapshot)
}

// Sets the data to the setValue state.
function renderData(querySnapshot) {
  setValue(querySnapshot.docs.map(doc => ({
    id: doc.id,
    data: doc.data()
  })))
}

Приведенный выше пример кода будет получать обновленные данные только для конкретного пользователя, внесшего изменение. Другим пользователям придется перезагрузить/обновить страницу, чтобы получить обновленные данные. Я также оставил некоторые комментарии к примеру кода.


Для получения более актуальной информации вы можете проверить эту документацию:

спасибо, marc за вашу помощь и за то, что сэкономили мое время, я знал об этом решении, но я думал, что смогу сделать это, только подписавшись на изменения

othmane-be 08.04.2022 15:51

Другие вопросы по теме