操作必須是普通對象。使用自定義中間件進行異步操作

Question

我一直對此感到震驚一陣子。我安裝了REDX-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

您沒有正確創建您的商店。從終極版的文檔：

createStore（減速機，[preloadedState]，[增強劑]）

createStore接受3個參數：根減速器，任選默認預加載狀態，並且增強子。

你逝去了Redux-的thunk作爲一個未知的第四個參數。您的代碼應該更喜歡：

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