react-redux, onClick startet keine Aktionsfunktion (undefiniert)

Question

Ich versuche eine AJAX-Anfrage mit reactive-redux auf der Taste zu machen, aber es kommt ein Fehler, wenn die Aktion onClick versucht, die Funktion von der Aktionskomponente zu starten.

post_data.js

import React, {Component} from 'react'; 
import {connect} from 'react-redux'; 
import {bindActionCreators} from 'redux'; 
import getPostsData from '../actions/index'; 

class PostButton extends Component{ 

constructor(props){ 
    super(props); 

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

GetPostData(event){ 
    event.preventDefault(); 
    this.props.getPostsData(); 
} 

render(){ 
    return(
     <div style={{marginTop: 50 + 'px'}}> 
       <button className="btn btn-success" onClick={this.GetPostData}>Click Here to Load Posts</button> 
     </div> 
    ) 
    } 
} 

function mapDispatchToProps(dispatch){ 
    return bindActionCreators({getPostsData}, dispatch); 
} 

export default connect(null, mapDispatchToProps)(PostButton); 

Aktion:

import axios from 'axios'; 

export const GET_POSTS_DATA = 'GET_POSTS_DATA'; 

export function getPostsData() { 
    const url = `https://jsonplaceholder.typicode.com/posts`; 

    const request = axios.get(url); 
    console.log(request); 

    return{ 
     type: GET_POSTS_DATA, 
     payload: request 
    } 
} 

Reducer:

import GET_POSTS_DATA from '../actions/index'; 

export default function(state = [], action){ 
    switch (action.type){ 

     case GET_POSTS_DATA: 
     return [action.payload, ...state] 
    } 

    return state; 
} 

Console Fehler: Uncaught Typeerror: this.props.getPostsData ist keine Funktion diese bezieht sich auf:

GetPostData(event){ 
    event.preventDefault(); 
    this.props.getPostsData(); 
} 

jede Hilfe ist willkommen ...

Answer 1

Ihre getPostsData Importanweisung sein sollte Von dem, was ich in Ihrem Snippet sehen kann, gibt es keinen Standard-Export.

Answer 2

Wahrscheinlich nur ein Tippfehler: getPostsData ist keine Eigenschaft Ihrer PostButton Komponente, sondern ein Import aus einem js Modul.

Rufen Sie direkt getPostsData() anstelle von this.props.getPostsData().

Answer 3

Dies ist der richtige Weg, um die genannte Funktion in Ihrem Fall zu nennen:

import {getPostsData} from '../actions/index'; 

Die Syntax Sie verwenden bezieht sich auf den Standard-Export:

GetPostData(event){ 
    event.preventDefault(); 
    getPostsData(); 
}