Redux tirant une action non définie lors de l'utilisation redux thunk

Question

Ce problème provient probablement d'une mauvaise configuration de redux-thunk ou d'une mauvaise compréhension de la façon d'écrire un thunk. J'ai essayé beaucoup de manières différentes, mais d'après ce que je peux dire, cela devrait fonctionner. Cependant, je reçois toujours un message de console qui indique son action de redux d'undefined.

Voici ma configuration de magasin

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Provider } from 'react-redux'; 
import { applyMiddleware, createStore } from 'redux'; 
import thunk from 'redux-thunk'; 
import App from './components/App'; 
import rootReducer from './reducers'; 

const store = createStore(rootReducer, applyMiddleware(thunk)); 

ReactDOM.render(
    <Provider store={ store }> 
     <App /> 
    </Provider>, 
    document.getElementById('rootElement') 
); 

Voici mon action:

import axios from 'axios'; 

export const GET_ABOUT_CONTENT_REQUEST = 'GET_ABOUT_CONTENT_REQUEST'; 
export const GET_ABOUT_CONTENT_FAILED = 'GET_ABOUT_CONTENT_FAILED'; 
export const GET_ABOUT_CONTENT_OK = 'GET_ABOUT_CONTENT_OK'; 

export const fetchAboutContent =() => { 
    const url = `http://localhost:3000/about`; 

    return (dispatch, getState) => { 
    if (getState.isInitialized === true){ 
     console.log("desktop init should not be called when already desktop is init") 
     return Promise.resolve(); 
    } 

    if (getState.about.isLoading) { 
     console.log('is loading'); 
     return Promise.resolve(); 
    } 
    dispatch({ type: GET_ABOUT_CONTENT_REQUEST }); 
    axios.get(url) 
     .then(res => dispatch({ 
     type: GET_ABOUT_CONTENT_OK, 
     res 
     })) 
     .error(err => dispatch({ 
     type: GET_ABOUT_CONTENT_FAILED, 
     err 
     })); 
    } 
} 

Ici me on tire l'action dans mon élément:

import React from 'react'; 
import { connect } from 'react-redux'; 
import { bindActionCreators } from 'redux'; 
import * as actions from '../../actions/about'; 
import getAboutContent from '../../reducers'; 

class AboutMe extends React.Component { 
    constructor(props) { 
    super(props); 
    } 

    componentWillMount() { 
    this.props.getAboutContent(); 
    } 

    render() { 
    return <div>{ this.props.content }</div> 
    } 
} 

const mapStateToProps = (state) => ({ 
    content: {} || getAboutContent(state) 
}) 

const mapDispatchToProps = (dispatch) => 
    bindActionCreators({ getAboutContent }, dispatch) 

export default connect(
    mapStateToProps, mapDispatchToProps 
)(AboutMe); 

J'ai essayé tout quelques configurations pour mapDispatchToProps, par exemple connect(..., { fetchData: getAboutContent })..., et plus encore. Toute aide est grandement appréciée.

Edit: Voici le git, si cela est utile à tout le monde: https://github.com/sambigelow44/portfolio-page

Answer 1

Vérifiez le nom du réducteur, vous exportez fetchAboutContent, mais importer getAboutContent.

Answer 2

Le code dans le fichier d'action semble incorrect.

getState est une fonction.

const state = getState(); 

Modifiez le code ci-dessous.

import axios from 'axios'; 

export const GET_ABOUT_CONTENT_REQUEST = 'GET_ABOUT_CONTENT_REQUEST'; 
export const GET_ABOUT_CONTENT_FAILED = 'GET_ABOUT_CONTENT_FAILED'; 
export const GET_ABOUT_CONTENT_OK = 'GET_ABOUT_CONTENT_OK'; 

export const fetchAboutContent =() => { 
    const url = `http://localhost:3000/about`; 

    return (dispatch, getState) => { 
    if (getState().isInitialized === true){ 
     console.log("desktop init should not be called when already desktop is init") 
     return Promise.resolve(); 
    } 

    if (getState().about.isLoading) { 
     console.log('is loading'); 
     return Promise.resolve(); 
    } 
    dispatch({ type: GET_ABOUT_CONTENT_REQUEST }); 
    axios.get(url) 
     .then(res => dispatch({ 
     type: GET_ABOUT_CONTENT_OK, 
     res 
     })) 
     .error(err => dispatch({ 
     type: GET_ABOUT_CONTENT_FAILED, 
     err 
     })); 
    } 
} 

Vous devez également renvoyer la promesse de l'appel axios, il suffit d'ajouter une instruction return.

return axios.get(url) 
    .then(res => dispatch({ 
    type: GET_ABOUT_CONTENT_OK, 
    res 
    })) 
    .error(err => dispatch({ 
    type: GET_ABOUT_CONTENT_FAILED, 
    err 
    }));