eine Redux ‚Aktion‘ von der Methode componentDidMount Aufruf

Question

Ich bin eine redux Aktion aus der react Methode componentDidMount() vom Aufruf lesen, sollen Sie die Dokumentation und verschiedene Beispiele die Eigenschaften/Aktionen durch die connect(props,actions)(component) Verfahren gebunden werden. Nein, wenn ich console.log(this.props) innerhalb der componentDidMount() Ich sehe, dass beide Eigenschaften und Aktionen vorhanden ist, aber wenn ich eine Aktion aufrufen, gibt es undefined zurück.

Hinweis: Die Aktion ist async Ich verwende applyMiddleware mit thunk und mit axios, um die Daten zu holen ... Ich habe dies durch eine Taste getestet, wie gut die Aktion aufrufen und es funktioniert gut, was es verengt bis zu einem bestimmten Laufzeitfehler mit connect().

[action/globals.js]

//dependencies 
import axios from 'axios' 

export const requestData = (type,url) => async dispatch => { 
    const { data } = await axios.get(url) 
    dispatch({type: type, payload: data}) 
} 

[Komponente/table.js]

//dependencies 
import React, { Component } from 'react' 
import { connect } from 'react-redux' 
//actions 
import { requestData } from '../actions/globals' 
//App 
class Table extends Component{ 
    async componentDidMount(){ 
    console.log('[MOUNTED]: table') 
    console.log(this.props); //displays - table, getData() 
    const data = await this.props.getData(); //but when called returns undefined 
    console.log(data); 
    // console.log('[AWAITING]: ',data); 
    console.log('[FINISH ASYNC]'); 
    } 

    render(){ 
    console.log('[RENDERING]: table') 
    if(this.props.table.data){ 
     return(
     <section> 
      <table></table> 
     </section> 
    ) 
    } 
    else{ 
     return null 
    } 
    } 
} 
//state prop mapping 
const mapping = (state) => { 
    return { 
    table: state.table 
    } 
} 
//actions 
const actions = (dispatch) => { 
    return { 
    getData:() => { 
     dispatch(requestData('FETCH_DATA','https://api.github.com/users')) 
    } 
    } 
} 
//export module 
export default connect(mapping,actions)(Table) 

Frage: Warum ist mein this.props.getData() undefined Rückkehr obwohl, wenn ich console.log(this.props) es existiert?

Answer 1

Ihre getData Funktion Rückkehr ist nichts, aber ist es auch in einem Dispatch-Anruf gewickelt wird, statt:

getData:() => { 
    dispatch(requestData('FETCH_DATA','https://api.github.com/users')) 
} 

Sie sollten so etwas wie haben:

getData:() => { 
    return requestData('FETCH_DATA','https://api.github.com/users').then((res) => { 
     dispatch(res); 
     return res; 
    }) 

}