Configure devToolsExtension and applyMiddleware() inside the React-Redux Store

Question

I am unable to figure out the exact way to use devToolsExtension and middleware at the same time in the redux store.

Below is my code for the redux store.

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

const reducers = combineReducers({
    counter: counterReducer
});
const store = createStore(
    reducers, 
    {counter: {count:0} },
    // window.devToolsExtension && window.devToolsExtension(), 
    applyMiddleware(thunk)
);

export default store;

As createStore() takes 3 arguments. Before applying middleware thunk I was using it as the below code which works fine for me.

const store = createStore(
    reducers, 
    {counter: {count:0} },
    window.devToolsExtension && window.devToolsExtension()
);

Now, I need to use devToolsExtension as well as apply the middleware at the same time.

I tried to put the devToolsExtension and applyMiddleware inside the array so that it acts as a third argument, but this won't work.

const store = createStore(
    reducers, 
    {counter: {count:0} },
    [window.devToolsExtension && window.devToolsExtension(), 
    applyMiddleware(thunk)]
);

Now the situation is that I need to either use devToolsExtension as a third argument or applyMiddleware() as a third argument.

But I want to use both at the same time. How can I achieve this?

Answer 1

you can do it this way

import { createStore, applyMiddleware,compose } from 'redux';
import reducers from '../reducers';
import reduxThunk from 'redux-thunk';
import {signOut} from '../actions/signOut';
import {checkLoggedInState} from '../actions/signIn';
//For Dev Tools -todo =remove for production bundle
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
// const createStoreWithMiddleware=applyMiddleware()(createStore);

const store=createStore(reducers,composeEnhancers(
    applyMiddleware(reduxThunk,signOut,checkLoggedInState)
));
export default store;