Redux feuert undefinierte Aktion bei der Verwendung von Redux thunk

Question

Dieses Problem stammt wahrscheinlich aus einer Fehlkonfiguration von Redux-Thunk oder einem Missverständnis, wie man einen Thunk schreibt. Ich habe viele verschiedene Möglichkeiten ausprobiert, aber nach dem, was ich sagen kann, sollte das funktionieren. Ich bekomme jedoch immer noch eine Konsolenmeldung, die besagt, dass sie eine Redux-Aktion von undefined ausgelöst hat.

Hier ist mein Speicher Konfiguration

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

Hier ist meine Aktion:

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

die Aktion in meiner Komponente Hier wird mich feuern:

ganz

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

Ich habe versucht, einige Konfigurationen für mapDispatchToProps, dh connect(..., { fetchData: getAboutContent })... und mehr. Jede Hilfe wird sehr geschätzt.

Edit: ist die git Repo, wenn das niemandem hilfreich: https://github.com/sambigelow44/portfolio-page

Answer 1

Ihr Minderer Name Überprüfen Sie exportieren fetchAboutContent, aber getAboutContent importieren.

Answer 2

Code in der Aktionsdatei scheint falsch zu sein.

getState ist eine Funktion.

const state = getState(); 

Den nachstehenden Code ändern.

Auch müssen Sie Versprechen aus Axios Anruf zurückgeben, nur Return-Anweisung hinzufügen.

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