React-native-debugger: It looks like you are passing several store enhancers to createStore()

[learnlapp]

React Native Debugger app version: v0.8.1
React Native version: 0.57.3
Platform: iOS
Is real device of platform: No
Operating System: macOS

I am getting this error

It looks like you are passing several store enhancers to createStore(). This is not supported. Instead, compose them together to a single function

It was working before I updated from 0.55.

This is how I create my store.

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

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

export default store;

It works fine when I use Chrome to debug.

Please help, thanks

[TomboFry]

I've just had this same problem with almost exactly the same code, and have managed to fix it.

Instead of passing three arguments to the createStore function, you need to pass two. To get around that, while still using the redux dev tools, you need to use the dev tools as the composer itself:

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

const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(
  reducers,
  composeEnhancer(applyMiddleware(thunk)),
);

export default store;

I realised this was the solution after digging around the redux library's, the debugger app's, and the dev tool's source code, and found this section: https://github.com/zalmoxisus/redux-devtools-extension#12-advanced-store-setup

Hope this helps!

[learnlapp]

Thanks @TomboFry

[firstred]

Thanks so much @TomboFry!

[MuhammadSulman]

const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

it does work

[SirFart4lot]

redux dev tool extension wrap your actions with it's own action, what you can do is change the order of the middlewares load,

const store = createStore(
    rootReducer,
    compose(
        applyMiddleware(
            /* ----  middlewares ----  */

        ),
        window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
    )
);

if you place the the redux devtools middleware before your middlewares, you will get the warped action.

[Ethanng329]

composeEnhancer(applyMiddleware(thunk)),

it works ,thanks

[idurant]

TomboFry's fix works.

Here is how you'd implement the fix using redux sagas

import { createStore, applyMiddleware, compose } from 'redux';
import createSagaMiddleware from 'redux-saga';
import { createLogger } from 'redux-logger';
import sagas from './sagas';
import rootReducer from './reducers/rootReducer';

const sagaMiddleware = createSagaMiddleware();
const logger = createLogger();

export default function configureStore(initialState, history) {
    let store = {};

    const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

    let createStoreWithMiddleware = composeEnhancers(
        applyMiddleware(sagaMiddleware, logger)
    )(createStore);

    store = createStoreWithMiddleware(rootReducer, initialState);

    sagaMiddleware.run(sagas);

    return store;
}

👍

[tuanluu-agilityio]

It's saved my time

const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

Thanks,

[devt3000]

https://redux-starter-kit.js.org/api/configurestore this will help.

[nicollasmatheus]

work like a charm thks @TomboFry

[AndrewZou]

For React 16, you may just use function composeWithDevTools( applyMiddleWare( thunk, logger )). Code block as below.

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

const store = createStore(
combineReducers({
dishes: Dishes,
comments: Comments,
leaders: Leaders,
promotions: Promotions
}), composeWithDevTools( applyMiddleware(thunk, logger) )
);

[osamasayed]

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

const store = createStore(
combineReducers({
dishes: Dishes,
comments: Comments,
leaders: Leaders,
promotions: Promotions
}), composeWithDevTools( applyMiddleware(thunk, logger) )
);

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

const store = createStore(
  allReducers,
  composeWithDevTools(applyMiddleware(thunk, sagaMiddleware))
);

Works like a charm thanks a lot!!

[fg0611]

I've just had this same problem with almost exactly the same code, and have managed to fix it.

Instead of passing three arguments to the createStore function, you need to pass two. To get around that, while still using the redux dev tools, you need to use the dev tools as the composer itself:

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

const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(
  reducers,
  composeEnhancer(applyMiddleware(thunk)),
);

export default store;

I realised this was the solution after digging around the redux library's, the debugger app's, and the dev tool's source code, and found this section: https://github.com/zalmoxisus/redux-devtools-extension#12-advanced-store-setup

Hope this helps!

Thanks! it worked!