reactjs - 在 firebase 数据库上，Redux 复制存储中的最后一个数据

问题描述

我在 react-redux 上实现了网络聊天，使用 firebase 实时消息。Firebase 始终返回最后一个消息对象。当我刷新页面时，最后一个日期也被添加到商店中，最后一个对象在 redux 中重复。

我怎样才能正确地做到这一点，以便在更新页面后我会检查商店是否有重复的消息，然后不要将其添加到 redux 中？

消息.js

const userData = JSON.parse(localStorage.getItem("user-data"));

useEffect( () => {
    if(userData.account_id) {
        firebaseDB.ref().child(API.firebaseEnv + "/messages/messageItem" + userData.account_id)
            .on("value", snap => {
                const dataMessages = snap.val();
                console.log(dataMessages)
                setTimeout(() => {
                    firebaseGetMessages(dataMessages);
                }, 2000);
            });
    }

}, []);

我试图在获取后删除会话，但是当我刷新页面时，所有数据都被删除了

firebaseDB.ref().child(API.firebaseEnv + "/messages/messageItem" + userData.account_id).remove()

动作.js

export const firebaseGetMessages = ( messages ) => (dispatch)  => {
    // console.log('action:', messages)
    dispatch(firebaseMessageData(messages));
};

const firebaseMessageData = ( firebaseData ) => ({
    type: "FIREBASE_SET_MESSAGE_DATA",
    firebaseData
});

减速器.js

export default function messages ( state = [], action = {}) {
    switch (action.type) {
        case 'SET_MESSAGES_DATA':
            return {
                ...state,
                data: action.messages,
                isLoading: false
            };
        case "FIREBASE_SET_MESSAGE_DATA":
            // console.log('state:', state.data);
            state.data.messages.push(action.firebaseData);
            return {
                 ...state,
        };
        default:
            return state
    }
}

标签： reactjsfirebase-realtime-databasereact-redux

firebaseDB.ref().child是stream数据，它会在数据更改时自动触发。因此，每当您推送新数据时，它都会触发并调用回调。如果您想一次性读取数据，请使用once该方法。示例如下

// 溪流

var starCountRef = firebase.database().ref('posts/' + postId + '/starCount');
starCountRef.on('value', function(snapshot) {
  updateStarCount(postElement, snapshot.val());
});

// 一度

var userId = firebase.auth().currentUser.uid;
return firebase.database().ref('/users/' + userId).once('value').then(function(snapshot) {
  var username = (snapshot.val() && snapshot.val().username) || 'Anonymous';
  // ...
});

reactjs - 在 firebase 数据库上，Redux 复制存储中的最后一个数据

问题描述

解决方案

推荐阅读