React Mobx Firebase.onAuthStateChanged listener

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
})
}
}

然后，我会从顶级容器组件的componentWillUnmount调用killFirebaseListener操作...并在必要时使用可观察的用户。我的理解是，当我的用户在成功登录或注销后观察到更新时，我的所有侦听器都会相应地更新并触发重新渲染......我错了吗？

有没有人有使用mobx的这种"用户侦听器"的经验？有没有人有任何可以传递的指针或资源。

Answer 1

好的。看起来我的想法很好用。我添加了

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

并且侦听器工作正常/更新没有问题。

Answer 2

对于任何在 react-mobx-firebase 集成中苦苦挣扎的人，我编写了一个开源工具包，可以为您完成所有工作。 Firestore 集成、身份验证、可选的内联管理 UI、简单渲染等。 希望有人会发现这很有用。 它叫奥尔坎，看看吧。