Aktionen müssen einfache Objekte sein, während redux thunk verwendet

Question

Ich benutze Redux Thunk, um mehrere Aktionen zu versenden. Ich habe eine store.js Datei

// 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__()); 

Ich habe eine 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') 
) 

Als ich betreiben meinen Code, den ich die folgenden Fehler in meiner Konsole sehen:

nicht erfasste Fehler: Aktionen müssen einfache Objekte sein. Verwenden Sie benutzerdefinierte Middleware für asynchrone Aktionen.

Was läuft mit dem obigen Code falsch?

Answer 1

Es ist nicht der richtige Weg, Middle mit redux devtools zu konfigurieren, readme redux devtools nach, sollten Sie dies tun:

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