На базе Firebase Redux дублирует последние данные из хранилища - PullRequest
Новая
       32

На базе Firebase Redux дублирует последние данные из хранилища

0 голосов
/ 03 апреля 2020

Я реализовал веб-чат наact-redux, используя firebase для сообщений в реальном времени. Firebase всегда возвращает последний объект сообщения. Когда я обновляю sh страницу, последняя дата также добавляется в магазин, а последний объект дублируется в избыточном количестве.

Как я могу сделать это правильно, чтобы после обновления страницы я проверил хранилище на наличие дублирующегося сообщения, а затем не добавлял его в редукс?

Сообщения. 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);
            });
    }

}, []);

Я пытался удалить сеанс после извлечения, но при обновлении страницы sh все данные удалялись 

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
    }
}

1 Ответ

1 голос
/ 03 апреля 2020

firebaseDB.ref().child - это stream данных, они автоматически срабатывают при изменении данных. Поэтому, когда вы набираете sh новых данных, они будут вызывать и вызывать обратный вызов. Если вы хотите прочитать данные за один раз, используйте 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';
  // ...
});

Подробнее: https://firebase.google.com/docs/database/web/read-and-write

...