this.props.dispatchは、反応するjsコンポーネントファイル内の関数ではありません。

Question

ページングの 'onSelect'イベントで、私はレンダリングの外側とコンポーネントのクラス内で定義されている関数を呼び出しています。しかし、時に来て、エラーの下に発射イベント -

ここ

BlogList.js:101 Uncaught TypeError: this.props.dispatch is not a function

である私のコードsnippit -

import React from 'react'; 
import StaticLayout from '../Layout/StaticLayout'; 
import { Link } from 'react-router-dom'; 
import { getBlogList } from '../actions/signupActions'; 
import { bindActionCreators } from 'redux'; 
import { connect } from 'react-redux'; 
import dateFormat from 'dateformat'; 

import { Pagination } from 'react-bootstrap'; 
import { push } from 'react-router-redux'; 
import queryString from 'query-string' 


class BlogList extends React.Component { 
    constructor(props){ 
     super(props); 
     document.title = "Blogs"; 

     this.changePage = this.changePage.bind(this); 
    } 

    componentDidMount() { 
     this.props.getBlogList(); 
    } 

    render(){ 

     //===pagination variable======== 
     const per_page = 1; 
     let pages = 0; 
     if(this.props.blogListData !== undefined){ 
      pages = Math.ceil(this.props.blogListData.count/per_page) ; 
     } 
     const current_page = this.props.page; 
     const start_offset = (current_page - 1) * per_page; 
     let start_count = 0; 
     //===End pagination variable======== 


     return(
      <StaticLayout> 
       <blog list related html /> 
       <Pagination className="users-pagination pull-right" bsSize="medium" maxButtons={10} first last next prev boundaryLinks items={pages} activePage={current_page} onSelect={this.changePage} /> 
      </StaticLayout> 
     ); 
    } 

    changePage(page){ 
     alert(page); 
     this.props.dispatch(push('/?page_no='+page)) 
    } 


} 


function mapStateToProps(state,ownProps){ 
    var queryParam = queryString.parse(ownProps.location.search); 
    return { 
     blogListData: state.UserReducer.blogData, 
     page: Number(queryParam.page_no) || 1, 
    } 
} 

function mapDispatchToProps(dispatch) { 
     return bindActionCreators({getBlogList: getBlogList}, dispatch) 
} 
export default connect(mapStateToProps, mapDispatchToProps) (BlogList); 

Plzを私は私が間違っているのか知ってみましょうか！

Answer 1

dispatchあなたはカスタム関数でそれをオーバーライドしていない場合にのみ接続を使用した場合のコンポーネントに使用可能です。あなたのケースではmapDispatchToProps関数です。だから、あなたが何ができるか

function mapDispatchToProps(dispatch) { 
    return bindActionCreators({getBlogList: getBlogList, push: push}, dispatch) 
} 

ようmapDispatchToProps機能に追加して、コンポーネントへの小道具としてpushアクションが利用できるようにと同じように使用され

changePage(page){ 
    alert(page); 
    this.props.push('/?page_no='+page) 
} 

Answer 2

changePageを接続して接続できます。私はこのモデルを読みやすく、維持しやすいと感じています。

function mapStateToProps(state,ownProps){ 
    var queryParam = queryString.parse(ownProps.location.search); 
    return { 
     blogListData: state.UserReducer.blogData, 
     page: Number(queryParam.page_no) || 1, 
    } 
} 

const dispatch = (dispatch, ownProps) => ({ 
    changePage: (page) => { 
    alert(page); 
    dispatch(push('/?page_no='+page)) 
    } 
}); 

export default connect(mapStateToProps, dispatch) (BlogList);