在反应 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.

附言结帐 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.

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