Redux: Eigenschaft 'then' von undefined kann nicht gelesen werden

Question

Ich versuche, Aktionen in mapDispatchToProps zu kombinieren. Versuchen, Daten abzurufen und nach dem Starten des modalen Dialogs. Aber ich bekomme immer kann nicht lesen Eigenschaft 'dann' von undefined Fehler.

Könnte mir jemand erklären, was mache ich falsch?

mapDispatchToProps:

const mapDispatchToProps = dispatch => ({ 
    onClick: id => { 
    // console.log(fetchThing(id)) returns undefined 
    dispatch(fetchThing(id)).then(() => { 
     dispatch(showModal()) 
    }) 
    } 
}) 

Redux Aktion:

export const fetchThing =() => { 
    const request = axios.get(URL_API) 

    return dispatch => { 
    request.then(response => { 
     dispatch({ type: ACTION_FETCH, payload: response.data }) 
    }) 
    } 
} 

Answer 1

Warum Sie redux-thunk nicht verwenden? Damit können Sie Ihre Aktion so schreiben:

export const fetchThing = dispatch => axios.get(URL_API) 
    .then(response => dispatch({ type: ACTION_FETCH, payload: response.data })) 

Redux thunk Middleware all die Dinge für Sie tun, und Sie brauchen nicht zu tun, dass jedes Mal, wenn Sie async Aktionen innerhalb des mapDispatchToProps benötigen.

Answer 2

mapDispatchToProps sollte keine Nebenwirkungen haben. Dies sollte nur tun, wie der Name andeutet und die Aktionen an Redux anschließen. Dies sollte sein:

const mapDispatchToProps = { 
    fetchThing: yourAction.fetchThing, 
    showModal: yourAction.showModal, 
}; 

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

Dann in Ihrer (wahrscheinlich) Taste:

<button type="button" onClick={this.handleClick} /> 

// this can be an asynchronous function, or you can just handle it in the action. 
handleClick = async id => { 
    await this.props.fetchThing(id); 
    this.props.showModal(); 
};