Reactjs 动作必须是普通对象。使用自定义中间件进行异步操作

这件事我绞尽脑汁已经有一段时间了。我设置了redux thunk，这样我就可以进行api调用，但我一直在

动作必须是普通对象。使用自定义中间件进行异步操作

在我的onClick事件触发器上。抱歉，如果这是重复的，但我找不到任何可以解决问题的方法。据我所知，我正在正确地创建动作。非常感谢您的帮助

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

下面是我在主页中调用onClick事件的方式

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;

---

您没有正确创建存储。从redux的文档中：

createStore（reducer、[预加载状态]、[增强器]）

createStore接受3个参数：根缩减器、可选的默认预加载状态和增强器

您正在将redux thunk作为未知的第四个参数传递。您的代码应该更像：

const store = createStore(reducer, composeWithDevTools(
    applyMiddleware(...middleware),
  // other store enhancers if any
));

---

您能否确认您确实在GeneratePapers中发出POST请求？我们很乐意提供帮助。如果这个答案对你有用，用绿色的“V”标记它是正确的，这样其他人也可以从中受益并依靠它。

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

const store = createStore(reducer, composeWithDevTools(
    applyMiddleware(...middleware),
  // other store enhancers if any
));