时间戳

首页 > 解决方案 > React Native Redux 在删除时触发实时更改

reactjs - React Native Redux 在删除时触发实时更改

问题描述

我正在使用 Redux 和 Firebase/Firestore 构建一个 React 原生社交媒体应用程序，我需要实现一个关注屏幕，用户可以在其中实时看到他关注的人。

我已经成功地完成了这项工作，让一切正常工作，除了删除部分。当用户在 redux 存储中添加到以下列表中，然后又被删除时，他不会被删除。

我得到这个工作的方式如下：firestore集合上的一个监听器，每当用户被关注/取消关注时，他都会从以下状态成功添加/删除。然后，我在 Redux 中有一个动作，它从关注中获取每个 id，并收集该用户的所有数据，该用户被关注到另一个状态，followedUsers（在关注状态下，他只获取用户的 id，并使用该 id 获取来自用户集合的数据，然后分派到 followUsers 状态）。

下面是动作

export const followingState = () => {
return((dispatch) => {
        firebase
        .firestore()
        .collection("following")
        .doc(firebase.auth().currentUser.uid)
        .collection("userFollowing")
        .onSnapshot((snapshot) => {
            let following = snapshot.docs.map(doc => {
                return doc.id;
            })
            
            dispatch({type : FOLLOWING_STATE, following });
            
            for(let j = 0; j < following.length; j++){
                dispatch(followedUsersState(following[j]));
            };
        })
});
}; 




export const followedUsersState = (uid) => {

return((dispatch) => {
  
      
                firebase
                .firestore()
                .collection("allUsers")
                .doc(uid)
                .get()
                .then((snapshot) => {
                    
                        let user =  {snapshot.id, ...snapshot.data()};
                       
                        dispatch({type : USERS_FOLLOWED_STATE, user});
                       
        });
})

}

减速机还：

case FOLLOWING_STATE:
        return {
            ...state,
            following: action.following
       };


case FOLLOWED_USERS_STATE:
        return {
            ...state,
            followedUsers: [...state.followedUsers, action.user]
        };

标签： reactjsreact-nativereduxreact-redux

解决方案

我认为问题出在您的“FOLLOWED_USERS_STATE”动作减速器中，通过调用followedUsers:[...state.followedUsers,action.user]您保持旧状态followedUsers并在每次 .collection("userFollowing").onSnapshot(...)触发时添加新用户，我认为您应该尝试一次性使用用户数组调度 USERS_FOLLOWED_STATE，这样您就可以刷新整个阵列，我希望这可以帮助

    export const followingState = () => {
    return((dispatch) => {
            firebase
            .firestore()
            .collection("following")
            .doc(firebase.auth().currentUser.uid)
            .collection("userFollowing")
            .onSnapshot((snapshot) => {
                let following = snapshot.docs.map(doc => {
                    return doc.id;
                })
                
                dispatch({type : FOLLOWING_STATE, following });


                // get all users data from db in one go
                const proms = following.map((id)=>{
                    return getFollowedUserState(id)
                })

                
                Promise.all(proms).then((snapshots)=>{
                    
                    const users = snapshots.map((snapshot)=>{
                        return {id:snapshot.id, ...snapshot.data()};
                    })
                    
                    // set all users data to local state in one go
                    dispatch({type : USERS_FOLLOWED_STATE, users});
                })
                
            })
    });
    }; 

    
    const getFollowedUserState = (uid)=>{
        return firebase
        .firestore()
        .collection("allUsers")
        .doc(uid)
        .get()
    }


 case FOLLOWING_STATE:
        return {
            ...state,
            following: action.following
       };
    case FOLLOWED_USERS_STATE:
        return {
            ...state,
            followedUsers: action.users
        };

推荐阅读