title: React Redux reducer not returning
body: <p>I have an application that has to return only future events. I am able to parse through my firebase realtime db and return only future events in my action. It then passes this array of data to my reducer. In my reducer, I am logging the payload. The console log displays the data I want. Now in my component screen, I console log to see what data I should see from the reducer and it is empty. </p>
  
  <p>My action:</p>
  
  <pre><code>    export const getAllEvents = () =&gt; {
  
          var currentTime = Date.now();
  
            return (dispatch) =&gt; {
              var ref = firebase.database().ref('Events/');
              ref.orderByChild("availableSpots").on("value", function(snapshot) {
  
                  snapshot.forEach(child =&gt; {
                      var time = child.val().epochTime;
  
                     if (currentTime &lt; time) {
                          console.log("Events redux: ", child.val());
  
                          dispatch({ type: GET_EVENT_LIST, payload: child.val() });
                      }
                  })
                  });
                });
  
  
            }
        }
  </code></pre>
  
  <p>As you can see I am console logging the child.val() which comes out as expected below:</p>
  
  <p><a href="https://i.stack.imgur.com/pnRO3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pnRO3.png" alt="enter image description here"></a></p>
  
  <p>Now I have this hooked up to my reducer via dispatch. </p>
  
  <pre><code>import { GET_EVENT_LIST } from '../actions/types';
  const INITIAL_STATE = {
      eventList: [],
  };
  
  const eventListReducer = (state = INITIAL_STATE, action) =&gt; {
      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;
  </code></pre>
  
  <p>As you can see the console log of the action.payload is being logged and produces an expected result:</p>
  
  <p><a href="https://i.stack.imgur.com/lWhYH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lWhYH.png" alt="enter image description here"></a></p>
  
  <p>Now back in my component screen:</p>
  
  <pre><code>    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=&gt;({userReducer: state.userReducer, eventListReducer: state.eventListReducer}), 
      { getUserThunk, getAllEvents }
    )(Home);
  </code></pre>
  
  <p>Now as you can see I do have different redux action and reducer hooked up and it comes through. However, the one in question returns empty. </p>
  
  <p><a href="https://i.stack.imgur.com/DopfI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DopfI.png" alt="enter image description here"></a></p>