Redux - 呼び出しアクションの際にprop - >ディスパッチをpropに設定しました

Question

私はReact/react-reduxを使用して反応で不規則なスクロールを作成しようとしています。ここに私のコンテナコンポーネントは次のとおりです。

export function loadArticles(){ 
    return { 
      type:"LOAD_ARTICLES" 
      }; 
} 

QUESTION：どのように私はloadMoreArticleshandleScroll内部関数を呼び出すん

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)<=20){ 
       //load more article from server. 
        this.props.loadMoreArticles(); <--- got error because this.props is undefined 
//HOW CAN I MAKE CALL HERE? 
      } 

     } 

     render(){ 
       return <div> 
         {this.props.articles.map(()=> 
         <SingleArticleContainer/> 
         )} 
         </div> 
       } 
    } 

const mapStateToProps=(state)=>{ 
    return { 
      articles:state.articles 
      }; 
} 

const mapDisptachToProps=(dispatch)=>{ 
     return { 
       loadMoreArticles:()=>{ 
       dispatch(loadArticles()); 
       } 
      }       
     } 

私もアクションloadArticles 自分の行動のクリエイターのためのアクションの作成者が作成しますか？私はloadMoreArticlesがコンポーネントのプロパティになっていることを理解しています。

Answer 1

thisはhandleScrollのコンポーネントを参照するのではなく、代わりにwindowになるため、関数をバインドする必要があります。これは動作するはずです：あなたはES6構文でthisにアクセスするための方法をバインドする必要がありますので、

componentDidMount(){ 
    this.scrollEvent = this.handleScroll.bind(this); 
    window.addEventListener('scroll', this.scrollEvent); 
} 

componentWillUnmount() { 
    window.removeEventListener('scroll', this.scrollEvent); 
} 

Answer 2

this.propsが定義されていない、何の自動バインディングはありません。たとえば、this.handleScroll= this.handleScroll.bind(this)というコンストラクターでそれを実行できます。

Answer 3

私はあなたが私はこの行を見てきましたので、を接続を使用してコンポーネントをラップしなかったことを推測する：

export class ArticleList extends React.Component{ 

を、あなたはおよそコンテナコンポーネントを思い出していると私はあなたが反応し使用していることを推測します-redux。

として怒鳴る修正して（最後の行にフォーカスを）私たちに結果を教えてください：まだありませんあなたが示唆するよう http://redux.js.org/docs/basics/UsageWithReact.html#presentational-and-container-components