在React Redux上使用FireStore onSnapShot的正确方法 [英] correct way to use firestore onSnapShot with react redux

问题描述

我正在尝试找出将firestore.onSnapshot与react-redux结合使用的正确方法.

I'm trying to figure out the correct way to use firestore.onSnapshot with react-redux.

我目前在我的操作文件中有此代码，我正在调用组件中的componentWillMount().

I currently have this code in my action file, which I am calling on componentWillMount() in my component.

export const fetchCheckins = () => async (dispatch) => {
const {currentUser} = firebaseService.auth();
try {
    let timestamp = (new Date());

    //set timestamp for beginning of today
    timestamp.setHours(0);
    //get checkins today
    let checkinstoday = (await firebaseService.firestore().collection(`/checkins/${currentUser.uid}/log`).where("timestamp",">=",timestamp).orderBy("timestamp","desc").get()).docs.map(doc => doc.data());
    //set timestamp for beggining of week
    timestamp.setDate(-(timestamp.getDay()));
    //get checkins (week)
    let checkinsweek = (await firebaseService.firestore().collection(`/checkins/${currentUser.uid}/log`).where("timestamp",">=",timestamp).orderBy("timestamp","desc").get()).docs.map(doc => doc.data());
    //set timestamp for begging of month
    timestamp.setDate(0);
    //get checkins (month)
    let checkinsmonth = (await firebaseService.firestore().collection(`/checkins/${currentUser.uid}/log`).where("timestamp",">=",timestamp).orderBy("timestamp","desc").get()).docs.map(doc => doc.data()); 

    dispatch({type: FETCH_CHECKINS, payload: { today: checkinstoday, week: checkinsweek, month: checkinsmonth}});
}
catch(e){
  console.error(e);
}

};

这很好，将正确的数据发送到组件并显示.问题是，如果用户签入，则签入数据应该调整，但不会调整，因为我只获取一次数据并将其发送，并且状态未重新呈现.

this works fine, the correct data is sent to the component and display. The problem is, that if the user checks in, the checkin data should adjust, but it does not, since I am getting the data once and sending it, and the state is not re-rendering.

我的问题是我应该如何处理?我使用.onSnapshot()而不是.get()吗?我要从.checkin()动作创建者中调用.fetchCheckins()吗?如何按照最佳做法进行操作?谢谢

My question is how I should approach this? Do I use .onSnapshot() instead of .get()? Do I call .fetchCheckins() from the .checkin() action creator? How do I approach according to best practice? thank you

推荐答案

根据firestore的文档，如果您需要实时更新，则应使用onSnapshot: https://firebase.google.com/docs/firestore/query-data/听

According to firestore's documentation if you need realtime updates you should use onSnapshot: https://firebase.google.com/docs/firestore/query-data/listen

在您的情况下，如果您使用.get()-您将获得一次更新，并且如果任何数据发生更改，firestore都不会通知您.这就是为什么您看不到更改.

In your case if you use .get() - you get the update once and firestore won't notify you if any of the data changes. That's why you are not seeing the changes.

P.S.结帐redux-firestore: https://github.com/prescottprue/redux-firestore -是不错的库，可以帮助您进行redux绑定.

P.S. checkout redux-firestore: https://github.com/prescottprue/redux-firestore - it's nice library that can help you with your redux bindings.

这篇关于在React Redux上使用FireStore onSnapShot的正确方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！