React Native Redux 在删除时触发实时更改答案

【问题标题】：React Native Redux triggering a real-time change on deleteReact Native Redux 在删除时触发实时更改
【发布时间】：2021-10-06 21:53:16
【问题描述】：

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

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

我得到这个工作的方式如下：firestore 集合上的一个监听器，每当用户被关注/取消关注时，他就会从 following中成功添加/删除> 状态。然后，我在 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]
        };

【问题讨论】：

标签： reactjs react-native redux react-redux

【解决方案1】：

我认为问题出在您的“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
        };

【讨论】：