Reactjs 在redux中保存实时侦听器

我需要在登录时触发firestore实时侦听器，以侦听用户配置文件数据更改，并在注销前取消它。要做到这一点，我需要在我被卡住的商店里保存实时侦听器。我想在redux做这个

export const cancelListener = (cancelListener) => {
return {
    type: actionTypes.CANCEL_LISTENER,
    cancelListener: cancelListener
}
}

export const uDataListener = (uid) => {
return dispatch => {
    dispatch(uDataStart())
    const dbRef = db.collection("user").doc(uid)
    const cancelSubscription = dbRef
        .onSnapshot(
            (doc) => {
                dispatch(uDataSuccess(doc.data()))
            }
            , ((error) => {
                dispatch(uDataFail(error.message))})
        );
    dispatch(cancelListener(cancelSubscription))
}
}

注销时，只需从redux商店调用它

export const logout = (cancelListener) => {
cancelListener()
fire.auth().signOut()
return {
    type: actionTypes.AUTH_LOGOUT
}
}

但是，cancelListener中未保存任何内容，因此无法触发。我如何完成这项任务？请

---

谢谢

简单想想，在

uDataListener

中调用一个动作，例如

START\u LISTENER

，在reducer中您可以：

    import { store } from './yourStore';

    let cancelListener, dbRef;
    function reducer(state, action) {
     switch (action.type) {
        case "START_LISTENER":
          dbRef = db.collection("user").doc(action.uid)
          cancelSubscription = dbRef.onSnapshot(function(doc) {
            store.dispatch( 
              yourAction(doc.data()); //Dispatch new action using store
            )
          })
          return state;
        case "STOP_LISTENER":
          cancelListener()
          return state;
        default:
          return state;
    }

当您注销时，

停止\u侦听器

将被显示

下面您可以看到如何从组件外部分派的链接

---

我在半夜醒来，想出了别的主意。我尝试将该方法添加到活动常量中，而不是将该方法保存在redux状态或reducer中。我不确定这是否是最好的方法，但它确实有效。现在我只是不明白为什么我一开始没有尝试这种方法。这里的代码还需要一些调整，但它可以工作

let cancelListener = null

export const logout = () => {
cancelListener()
fire.auth().signOut()
return {
    type: actionTypes.AUTH_LOGOUT
}
}

export const auth = (email, password) => {
return dispatch => {
    dispatch(authStart())
    fire.auth().signInWithEmailAndPassword(email, password).then((u) => {
        dispatch(authSuccess(u.user))
        const dbRef = db.collection("user").doc(u.user.uid)
        cancelListener = dbRef.onSnapshot((doc) => {
            dispatch(saveUserData(doc.data()))
        })
    }).catch((error) => {
        dispatch(authFailed(error.message))
    });

}
}

---

无论如何，非常感谢你的帮助。我真的很感激实现这一点的一种方法是设置一个自定义中间件来监视您关心的Redux操作，然后相应地执行您想要的firestore功能。这里有一个很好的简单示例：Hi Simran。我使用redux thunk作为midleware。我不是firebase方面的专家，但我可以看到您正在调用

dispatch（uDataStart（））

，在该函数的末尾

dispatch（cancelListener（cancelSubscription））

，总结一下，我觉得您正在执行

uDataStart

，之后就是

cancelListener

。您的firebase侦听器在没有redux的情况下工作吗？只需设置它并查看它们是否被调用cancelListener应在reducer case中保存const cancelSubscription（actionTypes.CANCEL_LISTENER）：返回{…状态，cancelListener:action.cancelListener}然而，它节省了价值，因为它看起来很有希望，但不幸的是，这不太管用。。我认为问题在于，从onSnapshot获取数据需要一些时间，因此状态在start listener中使用未定义的值进行更新，错误是，

db.collection（“user”）.doc（uid）

return？这只是对FireStore中数据位置的引用我在回答中添加了一些更新，我再也没想到什么了谢谢。。。我正要看一看。。。我会带着结果回来的