Состояние Redux Firestore не обновляется после добавления или удаления

Question

Текущая ссылка на веб-приложение: https://react -recycle.firebaseapp.com /

Код компонента компонента: https://github.com/steveula/react-recycle/blob/master/src/components/items/Item.js

API-интерфейс Redx-Firestore: https://github.com/prescottprue/redux-firestore

Примечание: Быстро зарегистрируйте учетную запись с поддельной информацией и установите инструменты React Dev Tools и Redux Dev, чтобы увидеть проблему.

Для моего проекта переработанные предметыиз Firestore находятся в карточках компонентов, как вы можете видеть на боковой панели приборной панели.Вы можете дублировать их и удалить их.Если вы перейдете на страницу без компонентов Item, например, «Советы и факты», а затем вернетесь на панель мониторинга, функциональность компонента Item будет работать просто отлично.Если вы посмотрите на REDUX DEV TOOLS, вы увидите, что firestore.ordered.userItems обновляется соответствующим образом.

Однако, если вы затем перейдете на страницу, которая также имеет компоненты Item, например, Статистика, а затем попытаетесь дублировать или удалитьдля них действие будет успешно обновлено в бэкэнде в Firestore, , но не в состоянии избыточности, , в частности firestore.ordered.userItems, поэтому реквизиты не будут обновляться, и пользовательский интерфейс не будет повторно отображаться. Проблема больше не сохраняется, если вы переходите на страницу без компонентов Item.

Я подумал, что проблема связана с прослушивателями, поэтому я попытался использовать setListeners() и * redux-firestore onSnapshot() функций, но это не сработало.

Что я могу сделать, чтобы решить эту проблему?

(PS: Извините, если я не понимаю что-то базовое здесь. Яновинка для реагирования и пожарного магазина, и это мой первый проект реагирования, созданный самостоятельно.)

Answer 1

У меня была очень похожая проблема.

То, как я решил, было установить слушателя в методе componentDidMount и сбросить его в componentWillUnmount.

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

В вашем случае:

componentDidMount() {
    this.props.firestore.setListener({collection: 'users'})
}
componentWillUnmount() {
    this.props.firestore.unsetListener({collection: 'users'})
}

Если вам нужно, вы можете установить несколько слушателей.