将 Firebase 与 Redux 绑定

Question

我正在使用firebase 构建一个react-redux 应用程序。

这是我的动作创建者：

export function fetchUser(uid) {
  let ref = firebase.database().ref('users/' + uid)
  return dispatch => {
    ref.on("value", (snapshot) => {
      let obj = snapshot.val()
      dispatch({
        type: FETCH_USER,
        payload: obj
      })
    })
  }
}

在我的 React 组件中，我希望能够链接它并连接另一个动作。所以像：

componentWillMount() {
      let userId = 'some user id'
      this.props.fetchUser(userId).then(()=> {
        this.props.updateUser() // perform another action after the fetch is complete
      })
}

我很难做到这一点。

• 一个问题是Firebase on 事件监听器没有实现promises 接口。
• 我不想将后续操作移动到 fetchUser 操作中，因为其他组件也可以出于其他目的调用 fetchUser。

我觉得这应该是直截了当的，但我对 redux 和 firebase 都是新手，所以我们将不胜感激。

Answer 1

您没有从 firebase 返回 Promise 的事实似乎并不是您的问题。您可以在您的动作创建者中返回一个承诺，然后使用该解决方案在您的componentWillMount() 中启动.then()。我们做了这样的事情：

export function fetchUser(uid) {

  let ref = firebase.database().ref('users/' + uid);

  return dispatch => {
    return new Promise( ( resolve, reject ) => {
      ref.on("value", (snapshot) => {
        let obj = snapshot.val();
        dispatch({
          type: FETCH_USER,
          payload: obj
        });
        resolve();
      })
    });
  }
}

另外，如果你想要来自 firebase 的承诺，你可以使用.once()。这实际上可能对您更有效，因此您在 /users 参考上没有永久听众。