React Redux редуктор не возвращается

Question

У меня есть приложение, которое должно возвращать только будущие события.Я могу анализировать мою базу данных Firebase в реальном времени и возвращать только будущие события в моем действии.Затем он передает этот массив данных моему редуктору.В моем редукторе я регистрирую полезную нагрузку.Журнал консоли отображает данные, которые я хочу.Теперь на экране моего компонента я регистрирую журнал, чтобы увидеть, какие данные я должен увидеть с редуктора, и он пуст.

Мое действие:

    export const getAllEvents = () => {

        var currentTime = Date.now();

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

                snapshot.forEach(child => {
                    var time = child.val().epochTime;

                   if (currentTime < time) {
                        console.log("Events redux: ", child.val());

                        dispatch({ type: GET_EVENT_LIST, payload: child.val() });
                    }
                })
                });
              });


          }
      }

Как вы можете видеть, я записываю консоль в журнал child.val (), который выглядит, как и ожидается ниже:

Теперь я отправил это через редуктор.

import { GET_EVENT_LIST } from '../actions/types';
const INITIAL_STATE = {
    eventList: [],
};

const eventListReducer = (state = INITIAL_STATE, action) => {
    switch (action.type){
        case GET_EVENT_LIST:
            console.log("action count", action.payload);
            return { ...state, eventList: [...state.eventList, action.payload] };

        default:
        console.log("default ");
            return state;
    }
};

export default eventListReducer;

Как вы видите, консольный журнал action.payload регистрируется и дает ожидаемый результат:

Теперь вернёмся к экрану моего компонента:

    import { getUserThunk, getAllEvents } from '../actions';
    import {connect} from 'react-redux';

    class Home extends Component {

      componentWillMount() {

        console.log("Component will mount");
        this.props.getUserThunk();
        this.props.getAllEvents();
      }
    render() {
      console.log("usersadf ", this.props.userReducer)
      console.log("Props in home ", this.props.eventListReducer)
      return (
        //some return code here

      );
    }

export default connect(
    state=>({userReducer: state.userReducer, eventListReducer: state.eventListReducer}), 
    { getUserThunk, getAllEvents }
  )(Home);

Теперь, как вы можете видеть, у меня есть разные действия по добавлению и восстановлению, и это происходит.Тем не менее, этот вопрос возвращается пустым.