Working with Redux Dev Tools extension and Typescript

Question

I'm converting my project to Typescript.

This has always worked for me in JS.

/* ##################### */
/* #### REDUX STORE #### */
/* ##################### */

const store = createStore(rootReducer, {
  // INITIAL STATE GOES HERE
},window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());

But in Typescript I'm getting these errors:

How can I fix this?

score 2 · Accepted Answer · answered Aug 14 '20 at 14:28

2

The error is getting throw from the TS compiler because it doesn't know about REDUX_DEVTOOLS_EXTENSION property on the Window object. You can extend the Window interface and add that which will make the TS compiler happy. Or you can do this:

createStore(rootReducer,{//INITIAL STATE GOES HERE},composeWithDevTools());

cite: https://redux.js.org/recipes/configuring-your-store#integrating-the-devtools-extension

answered Aug 14 '20 at 14:28

James

166
8

Thanks! Can I leave this on for production? Or should I bother removing it? – cbdeveloper Aug 14 '20 at 14:34
1

That probably depends on if you have a consumer-facing app or not, if you're storing secrets in state, etc? I don't personally think it's a big deal but YMMV. Here's what I found just from a quick google search: https://medium.com/@zalmoxis/using-redux-devtools-in-production-4c5b56c5600f and here's how to exclude them if you want - https://github.com/reduxjs/redux-devtools/blob/master/docs/Walkthrough.md#exclude-devtools-from-production-builds – James Aug 14 '20 at 14:55
2

Even better, you should use [our official Redux Toolkit package](https://redux-toolkit.js.org), which has a `configureStore` function that automatically enables the Redux DevTools Extension for you. – markerikson Aug 14 '20 at 18:47

score 2 · Answer 2 · answered Oct 23 '21 at 17:44

2

the easiest solution i found is to explicitly add __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ to the window object

declare global {
  interface Window {
  __REDUX_DEVTOOLS_EXTENSION_COMPOSE__?: typeof compose;
  }
}

answered Oct 23 '21 at 17:44

Eslam Adel

1,073
10
10

Working with Redux Dev Tools extension and Typescript

2 Answers2