Redux-devtools-extension: Deprecating `window.devToolsExtension`

[zalmoxisus]

window.devToolsExtension is being deprecated in favour of window.__REDUX_DEVTOOLS_EXTENSION__ and window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__. See the README on how to use them and the post about why we added the second function.

Also there's redux-devtools-extension npm package to make things easier.

Now we don’t have the order’s and noop functions’ confusion, also the shared window namespace isn’t too vague anymore. The deprecation warnings will come in the next versions and there will be also more sugar for the npm package.

[vdh]

I had a really frustrating morning today wondering why window.__REDUX_DEVTOOLS_EXTENSION__ was undefined because of this. It's all well and good to deprecate a feature, but it doesn't help if the documentation (which is linked to directly from 2.6.1.1) is updated well before Chrome eventually gets around to updating the actual extension to 2.7.0 ☹️

[zalmoxisus]

@vdh, Chrome should update the extension 2 days ago. Maybe you disabled autoupdating extensions somewhere in Chrome settings? Though I didn't know it's possible to disable it.

[vdh]

Sadly, for some reason Chrome's extension auto-updating isn't so auto, I had to manually force an update.

It might be nice to have an "in 2.7.0" or "as of 2.7.0" note on the deprecated part in the instructions as a hint to check one's plugin version?

[zalmoxisus]

@vdh, I added a note in the README. Anyway, we need autoupdating, as we're moving really fast here and still want to change / improve a lot of things. Hope it was just a temporally problem of Chrome as I didn't experience it before. If the problem with autoupdating will still persist, please open an issue, so we'll add a button to check if the extension is up to date and update it manually.

[oyeanuj]

@zalmoxisus I was a little confused while upgrading to the latest, around the usage of window.devToolsExtension. My code today looks like this:

const { persistState } = require('redux-devtools');
const DevTools = require('../containers/DevTools/DevTools');
store = createStore(
  reducer,
  initialState,
  compose(
    applyMiddleware(...middleware),
    window.devToolsExtension ? window.devToolsExtension() : DevTools.instrument(),
    persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/))
  )
);

Now with the new changes that you announced and deprecation of window.devToolsExtension, I changed my code to this:

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
store = createStore(
  reducer,
  initialState,
  composeEnhancers(
    applyMiddleware(...middleware),
    window.__REDUX_DEVTOOLS_EXTENSION__ ? window.__REDUX_DEVTOOLS_EXTENSION__() : DevTools.instrument(),
    persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/))
  )
);

but get the following error:

Uncaught Error: DevTools instrumentation should not be applied more than once. Check your store configuration.

I assume this error is because I can't use composeEnhancers with window.__REDUX_DEVTOOLS_EXTENSION. In that case, what is the best way to set it up to still be able to use standard old non-extension devtools & persistState as a backup?

Many thanks on your work on this!

[zalmoxisus]

@oyeanuj, yes you shouldn't use both. Best way would be:

let enhancer;
if (window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) {
  enhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__(
    applyMiddleware(...middleware)
  );
} else {
  enhancer = compose(
    applyMiddleware(...middleware),
    DevTools.instrument(),
    persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/))
  );
}
store = createStore(
  reducer,
  initialState,
  enhancer
);

New method, window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__, offers the ability to lock enhancers/middlewares (when the corresponding button is clicked) and to dispatch remote actions through other enhancers. See the blog post for more details. If you don't need those features, you can just replace window.devToolsExtension with window.__REDUX_DEVTOOLS_EXTENSION__.

Also note that the extension already includes persistState.

[oyeanuj]

@zalmoxisus great, thank you for the detailed answer!

[dfrho]

Redux dev tools is an awesome tool - Thanks for the great work on it!

[ghost]

For any one who is looking for exactly what to write to make redux dev tools work -
`import { createStore, applyMiddleware, compose } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";

import thunk from "redux-thunk";
import rootReducer from "./reducers";
import { persistState } from "redux-devtools";
import DevTools from "redux-devtools";

const middleware = [thunk];
const initialState = {};
let enhancer;
if (window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) {
enhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__(
applyMiddleware(...middleware)
);
} else {
enhancer = compose(
applyMiddleware(...middleware),
DevTools.instrument(),
persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/))
);
}

const store = createStore(rootReducer, initialState, enhancer);

export default store;
`

You need to install redux-devtools package with npm i redux-devtools , redux-thunk using npm i redux-thunk in your client directory.

[yairEO]

This is how I use it (working fine):

const store = createStore(reducer, initialState, window.devToolsExtension && window.devToolsExtension() );

[bciach]

@yairEO I am using it the same way, however I am not sure if its correct?

[zalmoxisus]

I think 2 years is enough for everybody to rename window.devToolsExtension to window.__REDUX_DEVTOOLS_EXTENSION__ in their apps. We'll add a deprecation warning in 2.15.5 and remove the variable in 3.0.

[ramsesls]

You could try like this

`const middlewares = [thunk];
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

export default function configureStore(initialState) {
return createStore(
reducer,
initialState,
composeEnhancers(applyMiddleware(...middlewares))
);
}`