React Mobx Firebase.onAuthStateChanged listener

Question

Я всегда ставлю свои auth.onAuthStateChange().then(user => ... внутри componentDidMount() компонента React верхнего уровня.

Тогда я бы удалил слушателя внутри componentWillUnmount()

Мой вопрос, как бы я это сделал? Моя идея примерно такая:

class Store {
  @observable user = null
  @action killFirebaseListener = this.removeListener()
  constructor() {
    this.removeListener = firebase.auth().onAuthStateChange(user => {
      if (user) this.user = user
    })
  }
}

Я бы тогда назвал killFirebaseListener действие от componentWillUnmount контейнерного компонента верхнего уровня... и просто используйте пользователя, наблюдаемого там, где это необходимо. Насколько я понимаю, когда мой пользователь наблюдает обновления после успешного входа в систему или выхода из системы, все мои слушатели будут обновлять и запускать повторную визуализацию соответственно... я ошибаюсь по этому поводу?

У кого-нибудь есть опыт работы с этим "пользовательским слушателем" с помощью mobx? У кого-нибудь есть указатели или ресурсы, которые они могут передать.

Answer 1

ХОРОШО. Похоже, моя идея работает просто отлично. я добавил

class Store {
  @observable user = null
  constructor() {
    firebase.auth().onAuthStateChanged(user => {
      if (user) {
        this.user = user
      }
    })
  }
}

и слушатель работает просто отлично / обновления без проблем.

Answer 2

Для тех, кто борется с интеграцией Reaction-MOBX-FireBase, я написал инструментарий с открытым исходным кодом, который сделает все за вас. интеграция с firestore, авторизация, дополнительный встроенный интерфейс администратора, простой рендеринг и многое другое. надеюсь, кто-то найдет это полезным. это называется orkan, проверьте это.