this.props.dispatch n'est pas une fonction dans le fichier de composant js reaction

Question

Dans la pagination événement 'onSelect', j'appelle une fonction définie en dehors de render et dans la classe du composant. Mais lorsque l'événement ci-dessous erreur de tir à venir -

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

voici mon code 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 laissez-moi savoir ce que je fais mal?

Answer 1

dispatch est disponible au composant lorsque vous utilisez connectez uniquement si vous n'êtes pas à la surchargez il une fonction personnalisée. ce qui dans votre cas est une fonction mapDispatchToProps. Donc ce que vous pouvez faire est de faire l'action push disponible comme accessoire pour le composant en l'ajoutant à la fonction mapDispatchToProps comme

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

et l'utiliser comme

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

Answer 2

Vous pouvez essayer de hisser la page de changement dans connect. Je trouve ce modèle plus facile à lire et à maintenir.

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);