CODEWITHSUNDEEP
javascriptreactjsreduxreact-reduxredux-devtools-extension
Vishal Shetty
Vishal Shetty

Reputation: 1668

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

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?

Upvotes: 5

Views: 4174

Answers (4)

dp5252
dp5252

Reputation: 41

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;

Upvotes: 0

Raj Mohan Jayakumar
Raj Mohan Jayakumar

Reputation: 11

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;

Upvotes: 1

Shubhanu Sharma
Shubhanu Sharma

Reputation: 2132

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;

Upvotes: 6

Omar
Omar

Reputation: 16623

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

Upvotes: 5

Related Questions