redux devtools Uncaught Fehler: Aktionen müssen einfache Objekte sein. Verwenden Sie benutzerdefinierte Middleware für Asynchron-Aktionen

Question

Dies ist, wie ich meinen Speicher erstellen

import { createStore, applyMiddleware } from 'redux'; 
import thunkMiddleware from 'redux-thunk'; 
import { routerMiddleware } from 'react-router-redux'; 
import rootReducer from '../reducers'; 

const debugware = []; 
if (process.env.NODE_ENV !== 'production') { 
    const createLogger = require('redux-logger'); 
    debugware.push(createLogger({ 
    collapsed: true 
    })); 
} 

export default function configureStore(history, initialState) { 
    const store = createStore(
    rootReducer, 
    initialState, 
    window.devToolsExtension ? window.devToolsExtension() : f => f, 
    applyMiddleware(thunkMiddleware, routerMiddleware(history), ...debugware), 
); 

    if (module.hot) { 
    // Enable Webpack hot module replacement for reducers 
    module.hot.accept('../reducers',() => { 
     const nextRootReducer = require('../reducers/index').default; 
     store.replaceReducer(nextRootReducer); 
    }); 
    } 

    return store; 
} 

Aber meine App nicht mehr funktioniert und ich kann finden, warum. Irgendein Vorschlag bitte.

Answer 1

Sie können dies versuchen:

import { createStore, applyMiddleware, compose } from 'redux'; 

const store = createStore(
    rootReducer, 
    initialState, 
    compose(
    applyMiddleware(thunkMiddleware, routerMiddleware(history), ...debugware), 
    window.devToolsExtension ? window.devToolsExtension() : f => f 
) 
); 

Answer 2

Der Enhancer DevTools immer in Compose die letzte sein sollte, so wird es über andere Middle und Enhancer wissen.

Zusätzlich, falls Sie wollen remote Aktionen versenden, sollten Sie auch hinzufügen:

if (window.devToolsExtension) window.devToolsExtension.updateStore(store) 

Wie in troubleshooting angegeben.