连接 Redux devtools 和 Thunk 中间件来存储

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;

Answer 1

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

Answer 2

From the doc :

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

    const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

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

Answer 3

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

Answer 4

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))
);

Answer 5

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'));