Actions must be plain objects. Use custom middleware for async actions - reactjs

Question

I've been banging my head around this for a while now. I setup redux-thunk so that I can do api calls but i keep getting
Actions must be plain objects. Use custom middleware for async actions.
on my onClick event triggers. Apologies if this is a duplicate but I couldn't find anything that would solve the problem. As far as I can tell I'm creating the action properly. Any help greatly appreciated.
store.js
import { applyMiddleware, createStore, compose } from 'redux'
import { syncHistoryWithStore } from 'react-router-redux'
import { browserHistory } from 'react-router'
import logger from "redux-logger"
import thunk from "redux-thunk"
// import the root reducer
import rootReducer from './reducers/index'
import paperData from './data/paperData'
import articleData from './data/articleData'
// create an object for the default data
const defaultState = { paperData, articleData };
// enable Redux Dev Tools
const enhancers = compose(
window.devToolsExtension
? window.devToolsExtension()
: f => f
);
const middleware = applyMiddleware(
logger(),
thunk);
const store = createStore(rootReducer,
defaultState,
enhancers,
middleware);
export const history = syncHistoryWithStore(browserHistory, store);
// hot reloading the reducer
if (module.hot) {
module.hot.accept('./reducers/', () => {
const nextRootReducer = require('./reducers/index').default;
store.replaceReducer(nextRootReducer)
})
}
export default store
index.js
import React from 'react'
import { render } from 'react-dom'
import Homepage from './containers/homepage';
import ArticleList from './containers/article-list';
// import css
// import components
import App from './components/App'
// import react router
import { Router, Route, IndexRoute } from 'react-router'
import { Provider } from 'react-redux'
import store, { history } from './store'
const router = (
<Provider store={store}>
<Router history={history}>
<Route path="/" component={App}>
<IndexRoute component={Homepage} />
<Route path="paperlist/:word" component={ArticleList} />
</Route>
</Router>
</Provider>
);
render(router, document.getElementById('root'));
App.js
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import * as actionCreators from '../actions/actionCreators';
import Main from '../containers/main';
function mapStateToProps(state) {
return {
paperData: state.paperData,
articleData: state.articles
}
}
function mapDispachToProps(dispatch) {
return bindActionCreators(actionCreators, dispatch)
}
const App = connect(mapStateToProps, mapDispachToProps)(Main);
export default App;
Here is how I'm calling the onClick event in my homepage
import React, {Component} from 'react';
import '../../styles/homepage.sass'
import WordCloud from './word-cloud';
const homepage = React.createClass ({
handleSubmit(e) {
e.preventDefault();
const searchQuery = this.refs.query.value;
console.log(this.refs.query.value);
this.props.generatePapers(searchQuery);
},
render() {
let query = this.props.query;
return (
<div className="input-group center">
<WordCloud {...this.props} />
<input id="search-input-box" type="text" className="form-control searchBox"
placeholder="Search artists..." ref="query"
>
</input>
<button id="search-button" className="btn btn-lg searchButton"
onClick={this.handleSubmit}>
<span className="glyphicon glyphicon-search" aria-hidden="true">
</span> Search
</button>
</div>
);
}
});
export default homepage;
actionCreators.js
import axios from "axios";
export const generatePapers = (query) => {
const request = axios.get("http://localhost:8888/generateWordcloud/" + query);
return (dispatch) => {
request.then(({data}) => {
dispatch({
type: "GENERATE_WORDCLOUD",
payload: data
})
})
};
};

Answer 1

You are not creating your store correctly. From the docs of redux:
createStore(reducer, [preloadedState], [enhancer])
createStore accepts 3 arguments: the root reducer, optionally the default preloaded state, and the enhancers.
Your are passing the redux-thunk as an unknown 4th argument. Your code should like more like:
const store = createStore(reducer, composeWithDevTools(
applyMiddleware(...middleware),
// other store enhancers if any
));