使用Reduce Thunk時，操作必須是普通對象

Question

我正在使用Redux thunk來分派多個操作。 我有一個store.js文件

// store.js 
import rootReducer from '../reducers/setInitData'; // reducer file 
import { applyMiddleware, createStore } from 'redux'; 
import thunk from 'redux-thunk'; 
const middleware = applyMiddleware(thunk); 

export default createStore(rootReducer, middleware, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()); 

我有一個app.js

import React from 'react'; 
import { render } from 'react-dom'; 
import { Provider } from 'react-redux'; 

import CampaignCreate from './CampaignCreate' // component 
import store from './store/store' // store.js 

store.dispatch((dispatch) => { 
    dispatch({ 
    type: 'SET_STATE', 
    payload : { 

    } 
    }) 
    dispatch({ 
     type : 'DISPLAY_REACT_COMPONENTS', 
     payload : { 
     dataLoadComplete : true 
     } 
    }) 
}); 
render(
<Provider store={store}> 
    <div id="campaign-init"> 
     <CampaignCreate /> 
    </div> 
</Provider>, 
document.getElementById('campaigns-react') 
) 

當我運行我的代碼我看到我的控制檯以下錯誤：

未捕獲的錯誤：操作必須是簡單的物體。使用自定義中間件進行異步操作。

上面的代碼出了什麼問題？

Answer 1

這不是配置與終極版devtools中間件正確的方式，根據終極版devtools' readme，你應該這樣做：

// don't forget import { compose } from 'redux' 
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; 
const store = createStore(reducer, composeEnhancers(middleware));