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

JiangangXiong · Accepted Answer · 2017-09-20 03:22:59Z

1

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

answered Sep 20, 2017 at 3:22

JiangangXiong

2,4461 gold badge14 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sam Over a year ago

It turns out I was missing a lot of pieces in the import. It was named improperly, and I was also calling the selector as if it were an action creator because of my misnamed imports.

WitVault · Accepted Answer · 2017-09-20 03:35:07Z

Code in action file is seems to be incorrect.

getState is a function.

const state = getState();

Change below code.

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

Also you need to return promise from axios call, just add return statement.

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

This was definitely wrong, however I think the bug was happening before this. When I called getstate improperly, it actually gave me a useful console.error message, but I definitely needed to fix this. Thank you!

Collectives™ on Stack Overflow

Redux firing undefined action while using redux thunk

2 Answers 2

1 Comment

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Related