Question

我始终将auth.onAuthStateChange().then(user => ...放在顶级React组件的componentDidMount()内。

然后我会删除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

对于那些为react-mobx-firebase集成而苦苦挣扎的人，我编写了一个开源工具包，可以为您完成所有工作。 Firestore集成，身份验证，可选的嵌入式管理界面，简单的呈现等。希望有人会觉得有用。它叫做orkan，请签出。

React Mobx Firebase.onAuthStateChanged侦听器

2 个答案: