Adding React Developer Tools to a Redux/Typescript project

·

1 min read

So you want to add React Developer Tools to your redux/typescript project? Here's how...

First you will want to make sure that you have React Developer Tools installed and enabled on your (chrome) browser.

Then link your project up to your store by going into your index.ts file where you have created the store, and adding in the following lines;

import { createStore, applyMiddleware, Store, compose } from "redux"

const composeEnhancers = (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store: Store<ArticleState, ArticleAction> & {
  dispatch: DispatchType
} = createStore(reducer, composeEnhancers(applyMiddleware(thunk)))`

So first off you are making sure that you have imported compose from redux.

Then by adding (window as any) you are making the typescript compiler happy.

Finally by using composeEnhancers you are adding the ability to add multiple enhancers to the store - eg the devtools and thunk.

Now when you start your project, eg npm start or yarn start, and go to localhost:3000, when you open the inspector tools you will see some additional options when you hover on >> Choose 'components'. The pane on the right shows the 'file structure' of what is being shown on the browser, the right pane shows the content of the props and store.

END