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

Question

我已经忙了一段时间了。我设置了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'));

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;

以下是我如何在我的主页中调用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;

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

您没有正确地创建您的商店。从redux的文档：

createStore(还原剂，preloadedState，增强剂)

createStore接受3个参数:根还原器(可选的默认预加载状态)和增强器。

你的第四次辩论赛是一个未知数。您的代码应该更像：

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