React native Redux object mapping creating duplicates on dynamic data from firebase

Viewed 74

I currently have a list that is always listening to the firebase database using 'on'

Everything seems to work except when new data is added to the database it seems to duplicate the data unless there is a refresh.

My action.js:

export const getAllEvents = () => {
    var a =[]
      return (dispatch) => {
        dispatch(fetchingStart());

            var ref = firebase.database().ref('Events/');
            ref.orderByChild("epochTime").on("value", function(snapshot) {

                snapshot.forEach(child => {
                    a.push(child.val())
                })
                console.log("Array dispatch ", a)
                dispatch(fetchingSuccess(a))


              });


      }
  }

My Reducer:

const INITIAL_STATE = {
    arr: [],
    isFetching: false,

}

const eventListReducer = (state = INITIAL_STATE, action) => {
    switch (action.type) {
        case FETCH_BEGIN:
            console.log("begining fetch")
          return { ...state, isFetching: true };
        case FETCH_SUCCESS:
          return { ...state, isFetching: false, arr: action.payload };
        default:
          return state;
      }
}

export default eventListReducer;

My rendering:

var obj = this.props.eventListReducer;

     {obj.map((request,i) => (
                                <TouchableOpacity activeOpacity={0.8} key={i} onPress={() => this.props.navigation.navigate('Event', {
                                    spots: request.availableSpots,
                                    date: request.date,
                                    puckdrop: request.time,
                                    level: request.level,
                                    organizer: request.scheduler,
                                    uuid: request.uuid,

                                })

                            }>
<Text.........

I think the problem lies either in the rendering with the keys maybe? Or with the reducer.

-------_Edit

So What is being rendered originally is OBJ1 OBJ2 now on a different device, I add data to firebase and now the original device looking at the list has this: OBJ1 OBJ2 OBJ1 OBJ2 OBJ3

So it keeps the current list and appends the new list of objects. If I refresh the app it has the list appearing how it should OBJ1 OBJ2 OBJ3

0 Answers
Related