錯誤獲取'未捕獲錯誤：操作必須是普通對象。使用自定義中間件進行異步操作。'由redux thunk

Question

我試着寫下面的代碼。但是redux-thunk不起作用。 你知道如何解決它嗎？ 當我執行此代碼時，它可能會得到此錯誤。 createStore.js:113 Uncaught Error: Actions must be plain objects. Use custom middleware for async actions. 但我已經安裝了redux-thunk。爲什麼會發生這種錯誤？

index.js

import { createDevTools } from 'redux-devtools'; 
import LogMonitor from 'redux-devtools-log-monitor'; 
import DockMonitor from 'redux-devtools-dock-monitor'; 
import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { createStore, combineReducers, applyMiddleware, compose } from 'redux'; 
import { Provider } from 'react-redux'; 
import { Router, Route, IndexRoute, browserHistory } from 'react-router'; 
import { syncHistoryWithStore, routerReducer } from 'react-router-redux'; 
import thunk from 'redux-thunk'; 
import * as storage from './persistence/storage'; 
import randomToken from './utlis/random'; 
import * as reducers from './reducers'; 
import { 
    App, 
    Home 
} from './components'; 

const reducer = combineReducers({ 
    ...reducers, 
    routing: routerReducer 
}); 

if (!storage.get('token')) { 
    storage.put('token', randomToken()); 
} 

const initialState = { 
    application: { 
    token: storage.get('token') 
    } 
}; 

const DevTools = createDevTools(
    <DockMonitor toggleVisibilityKey="ctrl-h" changePositionKey="ctrl-q"> 
    <LogMonitor theme="tomorrow" preserveScrollTop={false} /> 
    </DockMonitor> 
); 

const store = createStore(
    reducer, 
    initialState, 
    compose(
    applyMiddleware(
     thunk 
    ), 
    DevTools.instrument() 
) 
); 
const history = syncHistoryWithStore(browserHistory, store); 

ReactDOM.render(
    <Provider store={store}> 
    <div> 
     <Router history={history}> 
     <Route path="/" component={App}> 
      <IndexRoute component={Home}/> 
     </Route> 
     </Router> 
    </div> 
    </Provider>, 
    document.getElementById('app') 
); 

Map.js

import React from 'react'; 
import { connect } from 'react-redux'; 
import * as actions from '../actions/cityForcast'; 

export class Home extends React.Component { 
    constructor (props, context) { 
    super(props, context); 
    } 

    componentWillMount() { 
    this.props.dispatch(actions.search(this.props.token)); 
    } 

    render() { 
    return (
     <div> 
     <button onClick={() => actions.search()}>Search</button> 
     </div> 
    ); 
    } 
} 

export default connect(({ application, cityForecast }) => ({ application, cityForecast }))(Home);enter code here 

cityForcast.js

export function search(token) { 
    return dispatch => { 
    console.log(token); 
    }; 
} 

Answer 1

我能解決爲了我自己。我需要安裝redux-thunk作爲devDependencies。