Connecting Redux devtools and Thunk middleware to store

Question

I am trying to connect redux-devtools to my store but I keep getting the following error: " It looks like you are passing several store enhancers to createStore(). This is not supported. Instead, compose them together to a single function error."

*Using Thunk as middleware.

tried to use an enhancer but I was still getting different errors.

Help will be appreciated.

this is how my store looks like:

import {createStore,applyMiddleware} from 'redux';
import thunk from 'redux-thunk'

const initialState={
 bla:"",
 bla:"",
 bla:"",
}

const reducer = (state= initialState, action)=>{
 bla bla bla..
 actions...
}


const store= createStore(reducer,applyMiddleware(thunk))

export default store;

score 8 · Answer 1 · answered Jan 11 '20 at 19:04

8

From the doc:

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

    const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

    const store = createStore(reducer, composeEnhancers(applyMiddleware(...middleware));
  ));

answered Jan 11 '20 at 19:04

Wei

724
9
10

I don't see what the enhancers do here; I need it for trace, so the option to enhance would be { trace: true }. How would the code above run with that? – Paul Pacurar Jun 22 '23 at 15:51

score 5 · Answer 2 · answered Mar 06 '19 at 16:01

The simplest way is to install

npm install --save-dev redux-devtools-extension

then :

import { createStore, applyMiddleware } from 'redux';
import thunk from "redux-thunk";
import { composeWithDevTools } from 'redux-devtools-extension';

   const middlewares = [thunk, ...others ];

    const appReducers = combineReducers({
      yourReducers
    });


const store = createStore(appReducers, composeWithDevTools(
  applyMiddleware(...middleware),
  // other store enhancers if any
));

read more about the configuration

score 3 · Answer 3 · answered Dec 03 '20 at 02:13

This worked for me. I just used the compose method to combine Thunk and Dev Tools.

import { createStore, applyMiddleware , compose} from 'redux'
import thunk from 'redux-thunk'
import rootReducer from './reducers'

const store = createStore(rootReducer, compose(applyMiddleware(thunk), window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()));

export default store

score 1 · Answer 4 · answered Jun 17 '20 at 02:04

Reason for not working : When we use redux-devtools-extension and redux-thunker together, it not working because of incorrect configuration. I was experiencing the same problem.

Solution :

npm Packages Required :

npm i  redux 
npm i  redux-devtools-extension
npm i  redux-thunker

Code:

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';

import createThunkerMiddleware from 'redux-thunker';

import rootReducer from './reducers/index';

const initialState = {};

const thunk = createThunkerMiddleware({
  extraArgumentsEnhanced: {
    fetch,
  },
});
const middleware = [thunk];

export default createStore(
  rootReducer,
  initialState,
  composeWithDevTools(applyMiddleware(...middleware))
);

score 0 · Answer 5 · edited Aug 14 '20 at 08:47

I have already answered this in a similar question, here is the link.

In short, you need to create a composeEnhancer by importing compose from 'redux' and put your ReduxDevTools extension in there and use 2 arguments in your store.

const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const Store = createStore(rootReducer, composeEnhancer(applyMiddleware(thunk)))

ReactDOM.render(<Provider store={Store}><BrowserRouter><App/></BrowserRouter></Provider>, document.getElementById('root'));

Connecting Redux devtools and Thunk middleware to store

5 Answers5