React Mobx Firebase.onAuthStateChanged 监听器答案

【问题标题】：React Mobx Firebase.onAuthStateChanged listenerReact Mobx Firebase.onAuthStateChanged 监听器
【发布时间】：2023-04-02 02:29:02
【问题描述】：

我总是将我的auth.onAuthStateChange().then(user => ... 放在顶级 React 组件的componentDidMount() 中。

然后我会删除componentWillUnmount() 中的监听器

我的问题是我将如何 mobx-ify 这个？我的想法是这样的：

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

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

有没有人有过使用 mobx 处理这种“用户监听器”的经验？有没有人有任何可以传递的指针或资源。

【问题讨论】：

标签： reactjs firebase mobx mobx-react

【解决方案1】：

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

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

监听器工作正常/更新没有问题。

【讨论】：

【解决方案2】：

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

【讨论】：