Getting Redux DevTools to Work with TypeScript
- By : Mydatahack
- Category : Front-End, Web Technologies
- Tags: React, Redux, Redux DevTools, TypeScript
Redux DevTools is a chrome extension that enables developers to see Redux state change in the browser’s console. This post is a quick reference to set up your TypeScript react file so that you can debug your code with Redux DevTools.
For normal JavaScript, it will be easy. You can just pass composeEnhancer() into the store with the property __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ as below. This code goes into the index.jsx or wherever you wrap entire app with Provider in the ReactDom.render() method.
On the other hand, TypeScript does not know the type of the property. Therefore, you will get the error; Property ‘__REDUX_DEVTOOLS_EXTENSION_COMPOSE__’ does not exist on type ‘Window’.
Hence, you need to add the property to the global window as below.
The devtools should be working now!