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?

Tegucigalpa

Redux devTools is great, but I don't use it that often. I'd recommend you to use redux-logger, super handy and easy to configure github.com/evgenyrodionov/redux-logger – Shae

@konekoya hey thanks, I will surely try it in my next project. – Tegucigalpa

Answer 1

Use compose from redux:

import { 
    compose,
    // ...
} from 'redux';

// ...

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

Norean

Answer 2

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;

Hardcastle

Answer 3

This should work perfectly fine -

import { createStore, applyMiddleware, compose } from 'redux';
import rootReducer from '../reducers/rootReducer';
import captureMiddleWare from '../captureMiddleWare';

const commonStore = createStore(rootReducer, compose(applyMiddleware(captureMiddleWare), window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()));

export default commonStore;

Staid

Answer 4

You can try this one

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

const middleWires = [thunk];
const configureStore = (preloadedState) => {
// basic setup

// const store = createStore(
//     rootReducer,
//     compose(
//         applyMiddleware(...middleWires),
//         typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
//     )
// );

// advance setup
const composeEnhancers = (process.env.NODE_ENV !=="production") && typeof window === 'object' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
    }) : compose;
const enhancer = composeEnhancers(
    applyMiddleware(...middleWires),
);
const store = createStore(rootReducer, preloadedState, enhancer);
return store;
}

const store = configureStore();

export default store;

Limicolous

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Struma