title: Redux - Map dispatch to prop -> got undefined when call action
body: <p>I'm trying to build infinitive scroll in react using React / react-redux. Here is my container component : </p>
  
  <pre><code>    import React from "react";
      import {SingleArticleContainer} from "./singleArticleContainer";
      import {connect} from "react-redux";
  
      export class ArticleList extends React.Component{
  
      componentDidMount(){
              window.addEventListener('scroll', this.handleScroll);
          }
          componentWillUnmount() {
              window.removeEventListener('scroll', this.handleScroll);
          }
  
          handleScroll(event){
              let scrollTop = event.srcElement.body.scrollTop;
              let viewHeight=window.innerHeight;
              let elemtScrollHeight=event.srcElement.body.scrollHeight;
              if((elemtScrollHeight-scrollTop-viewHeight)&lt;=20){
                 //load more article from server.
                     this.props.loadMoreArticles(); &lt;--- got error because this.props is undefined
  //HOW CAN I MAKE CALL HERE?
              }
  
          }
  
          render(){
                  return &lt;div&gt;
                         {this.props.articles.map(()=&gt;
                          &lt;SingleArticleContainer/&gt;
                            )} 
                         &lt;/div&gt;
                 }
      }
  
  const mapStateToProps=(state)=&gt;{
       return {
              articles:state.articles
              };
  }
  
  const mapDisptachToProps=(dispatch)=&gt;{
        return {
                loadMoreArticles:()=&gt;{
                 dispatch(loadArticles());
                  }
               }                         
        }
  </code></pre>
  
  <p>I also create the action creator for the action <code>loadArticles</code> 
  my action creator : </p>
  
  <pre><code>export function loadArticles(){
       return {
              type:"LOAD_ARTICLES"
             };
  }
  </code></pre>
  
  <p>QUESTION: How do I call <code>loadMoreArticles</code> inside <code>handleScroll</code> function? As I understand that the <code>loadMoreArticles</code> is now a property of component. </p>