Redux-devtools-extension: Actions must be plain objects. Use custom middleware for async actions. :(

[fat]

Hi!

Your chrome extension is producing the following error with my application:

Actions must be plain objects. Use custom middleware for async actions.

We use redux with the thunk middleware (and extra argument) + react-router-redux middleware (looks like this):

  const router = routerMiddleware(browserHistory)
  const store = create(
    rootReducer,
    getInitialState(),
    applyMiddleware(thunk.withExtraArgument(api), router)
  )

And a sample of how our actions are defined (which are cuasing teh problems) look like this:

export const authenticate = (code) => {
  return (dispatch, getState, api) => {
    return null
  }
}

Am I doing something wrong? Without your extension, the app compiles and runs fine. Any guidance would be super appreciated, thanks!

If you need more info, let me know!! <3

[zalmoxisus]

I don't see the extension's enhancer in the provided snippet. Should be:

  const router = routerMiddleware(browserHistory)
  const store = create(
    rootReducer,
    getInitialState(),
    compose(
      applyMiddleware(thunk.withExtraArgument(api), router),
      window.devToolsExtension ? window.devToolsExtension() : f => f
    )
  )

Note that the extension's enhancer should be always last in the compose. Just in case, compose is imported from Redux.

Also, if you want to dispatch actions remotely, after that code you also have to add

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

So, the extension would know about the middlewares.

Please let me know what exactly was the problem.

[zalmoxisus]

As replied on twitter, looking into the site's code, you're mixing the old Redux API with the new one. The code I provided above should fix the issue.

[zalmoxisus]

@fat, did you get a chance to check it out? Any updates on this issue?

[fat]

Checking it out today, thanks! Ill close for now and reopen if it's still a problem

[fat]

Yep, deployed and fixed it.

I was doing this before:

const create = window.devToolsExtension
  ? window.devToolsExtension()(createStore)
  : createStore

const router = routerMiddleware(browserHistory)
const store = create(
  rootReducer,
  getInitialState(),
  applyMiddleware(thunk.withExtraArgument(api), router)
)

But switching it to this fixed the error:

  const router = routerMiddleware(browserHistory)
  const store = createStore(
    rootReducer,
    getInitialState(),
    compose(
      applyMiddleware(thunk.withExtraArgument(api), router),
      window.devToolsExtension ? window.devToolsExtension() : f => f
    )
  )

thanks for the help!

[kuznetsovlv]

Oh! Thanks! I had same problem just now! It was solved in the same way! Very helpful! Thank you!

[zalmoxisus]

@kuznetsovlv, please take into consideration that window.devToolsExtension and updateStore are being deprecated. You should use window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__, which helps to avoid such confusions as in this issue. More details in the docs.

[kuznetsovlv]

Oh! Thank you! Tomorrow I'll check this issue.

[swp44744]

@zalmoxisus hello guys, I am having same issue I have added the extension but still getting below error:
Uncaught Error: Actions must be plain objects. Use custom middleware for async actions

my store looks like this:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import ReduxPromise from 'redux-promise';
import { Router, browserHistory } from 'react-router';
import reducers from './reducers';
import routes from './routes';

const createStoreWithMiddleware = applyMiddleware(ReduxPromise)(createStore);

ReactDOM.render(
<Provider store={createStoreWithMiddleware(reducers,window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())}> <Router history = {browserHistory} routes={routes}/> </Provider>
, document.getElementById("main"));

I know this bug is closed, any help is appreciated.

[zalmoxisus]

@swp44744, you're mixing the old Redux API with the new one. Also the extension should be applied as store enhancer not as a middleware.

Here's how it should be:

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

- const createStoreWithMiddleware = applyMiddleware(ReduxPromise)(createStore);
+ const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+ const store = createStore(reducer, composeEnhancers(applyMiddleware(ReduxPromise)));

- <Provider store={createStoreWithMiddleware(reducers,window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())}> <Router history = {browserHistory} routes={routes}/> </Provider>
+ <Provider store={store}> <Router history = {browserHistory} routes={routes}/> </Provider>

[swp44744]

Thanks Buddy this approach worked,
I also realized that I was getting that error only when I am doing API call in my action through axios and returning response to reducer through ".then" like below:

const response = axios.get(url, {
params: {
query: inputData,
maxResults: '10'
}
})
.then(function (response) {
return{
type: ACTION_TYPE,
payload: response
};
})
.catch(function (error) {
console.log(error);
});

[farskid]

@zalmoxisus The approach you provided solved my same issue. Thanks

[electronicadept]

I know this has been closed for a while, but I'm getting this error when trying to call an API through thunk. Here's my createStore:

import { createStore, applyMiddleware, combineReducers, compose } from 'redux'
import thunk from 'redux-thunk'
import {routerReducer} from 'react-router-redux'
import clients from 'reducers/Clients'

export default function configureStore(initialState){
    console.log("Creating store")
    const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
    const store = createStore(
        reducer,
        composeEnhancers(applyMiddleware(thunk))
    )
    return store
}

And my API call:

export const fetchClients = () => {
    return function (dispatch){
        console.log('Called me!')
        dispatch(requestClients())
        const headers = {
            'Accept': 'application/json', 
           'Content-Type': 'application/json',
            'Authorization': 'Bearer '+localStorage.getItem('id_token')
        }
        return fetch('/api/Clients', {
            headers
        })
            .then(response => response.json())
            .then(json =>
                dispatch(receiveClients(json))
            )
            .catch(error => console.log(error))
    }
}

I can't seem to figure out why this is happening. Thanks in advance for the help!

[zalmoxisus]

@electronicadept what version of Redux do you have? Does it work when the extension is disabled?

[electronicadept]

Redux version is 3.6.0.

Actually, investigating your second question lead me to realize I was importing actions improperly, meaning they didn't get passed to dispatch correctly, which caused the error. It was getting passed as 'undefined', which redux-thunk isn't designed to handle! So, in short, I'm an idiot! But, at least I am an idiot with a solved problem now!

Thanks @zalmoxisus for the help!

[zalmoxisus]

Hhh, no probs.

[totymedli]

For me, this error came because of a typo. I forgot to return the inner function.

I wrote this:

export const fetchStuff = someParameter => {
  dispatch => {
    // Do your thing...
  }
}

The correct way is this:

export const fetchStuff = someParameter => dispatch => {
  // Do your thing...
}

[lakshya-8]

I've gone through all the comments but still getting the same error
i.e Actions must be plain objects. Use custom middleware for async actions., could anyone please help me ?

define([
        "redux",
        "redux-thunk",
        "../reducers/reducer.index"],
    function (Redux, thunkMiddleware, reducer) {

        var createStore = Redux.createStore;
        var compose = Redux.compose;
        var applyMiddleware = Redux.applyMiddleware;

        var enhancers = compose(
            window.devToolsExtension ?
                window.devToolsExtension() :
                function (store) {
                    return store;
                }
        );

        return createStore(
            reducer,
            applyMiddleware(thunkMiddleware),
            enhancers
        );

    });

--- Action Creator---

          modelSaved: function () {
                return {
                    type: Actions.SAVE_MODEL
                }
            },

            saveModel: function (config) {
                return function (dispatch) {
                    dispatch(this.modelSaved());
                }
            },

[genericlady]

@lakshya-8

try something like this

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
  reducers,
  undefined,
  composeEnhancers(
    applyMiddleware(...middlewares)
  )
)

[lakshya-8]

Actually I was passing wrong arguments to the createStore function and I've fixed that using below changes . thanks @genericlady :)

define([
        "redux",
        "redux-thunk",
        "../reducers/reducer.index"],
    function (Redux, thunk, reducer) {
        var createStore = Redux.createStore;
        var compose = Redux.compose;
        var applyMiddleware = Redux.applyMiddleware;
        var thunkMiddleware = thunk.default;

        var enhancers = compose(
            window.devToolsExtension ?
                window.devToolsExtension() :
                function (store) {
                    return store;
                }
        );

        const middleware = applyMiddleware(thunkMiddleware);

        return createStore(
            reducer,
            compose(middleware, enhancers)
        );

    });

[charliepeck]

Same problem integrating firebase.

app.js:54628 Error: Actions must be plain objects. Use custom middleware for async actions.
at dispatch (app.js:31576)
at Object.fetchBase (app.js:32220)
at Object.next (app.js:63640)
at app.js:54507
at app.js:54622
at

I got this working in another application, but I don't know why i'm having problems here. The only thing I'm adding from my previous app is routerMiddleware and browserHistory. Any help would be appreciated.

package.json

...
"react-router-dom": "^4.1.1",
"react-router-redux": "^4.0.8",
"redux-thunk": "^2.2.0",
"redux": "^3.5.2",
...

store.js

import { createStore, applyMiddleware, compose } from 'redux';
import reduxThunk from 'redux-thunk';
import { routerMiddleware } from 'react-router-redux';
import { browserHistory } from 'react-router-dom';

// Import the root reducer
import allReducers from './reducers';

// import default data
import config from './data/config';

const defaultState = {
  events: [],
  config,
  activeGame: null,
  basePath: '',
};

const router = routerMiddleware(browserHistory);
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(allReducers, defaultState,
  composeEnhancers(applyMiddleware(reduxThunk, router)));

export default store;

Actions.js

...
export const fetchBase = () => {
  const organizationRef = database.ref(`users/${auth.currentUser.uid}/organization`);
  return dispatch => {
    organizationRef.once('value', snapshot => {
      dispatch({
        type: ActionTypes.FETCH_BASE,
        payload: snapshot.val()
      });
    });
  };
}; // fetchBase
...