Redux firing undefined action while using redux thunk

Question

This issue likely stems from a misconfiguration of redux-thunk or a misunderstanding of how to write a thunk. I've tried a lot of different ways, but from what I can tell, this should work. However, I'm still getting a console message that says its firing a redux action of undefined.

Here is my store configuration

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

Here is my 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
      }));
  }
}

Here is me firing the action in my component:

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

I've tried quite a few configurations for mapDispatchToProps, i.e. connect(..., { fetchData: getAboutContent })..., and more. Any help is greatly appreciated.

Edit: Here is the git repo, if that is helpful to anybody: https://github.com/sambigelow44/portfolio-page

Answer 1

Check your reducer name，you export fetchAboutContent, but import getAboutContent.