React Mobx Firebase.onAuthStateChanged listener

Question

I have always put my auth.onAuthStateChange().then(user => ... inside the componentDidMount() of a top level React component.

Then I would remove the listener inside of componentWillUnmount()

My question is how would i mobx-ify this? My idea is something like this:

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

I would then call the killFirebaseListener action from the componentWillUnmount of a top level container-component... and just use the user observable where necessary. It is my understanding that when my user observable updates upon a successful login or logout, all my listeners will update and trigger a re-render accordingly... am i wrong about this?

Does anyone have experience with this sort of "user listener" with mobx? Does anyone have any pointers or maybe resources that they can pass along.

archae0pteryx archae0pteryx · Accepted Answer · 2017-08-20T15:05:53

OK. Looks like my idea works just fine. I added

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

and the listener works just fine / updates without issue.

React Mobx Firebase.onAuthStateChanged listener

2 Answers