Integrating TypeScript with Redux DevTools

Configure Redux DevTools with TypeScript to gain insights into the type-related issues at runtime as actions are dispatched and state changes occur.

// Actions.ts
export interface IncrementAction {
  type: 'INCREMENT';

export interface DecrementAction {
  type: 'DECREMENT';

export type Action = IncrementAction | DecrementAction;
Defines TypeScript interfaces for each action type and a union type for all actions.

// rootReducer.ts
import { combineReducers } from 'redux';
import { Action } from './Actions';

interface State {
  count: number;

function counterReducer(state: State = { count: 0 }, action: Action): State {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
      return state;

export const rootReducer = combineReducers({
  counter: counterReducer
Creates a rootReducer with TypeScript, combining reducers that are also typed.

// store.ts
import { createStore } from 'redux';
import { rootReducer } from './rootReducer';

const storeEnhancers = (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__;

export const store = createStore(
  storeEnhancers ? storeEnhancers() : undefined
Integrates Redux DevTools with the store using window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__, which is specifically typed as any to allow access to potential browser extensions.

// index.ts
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { store } from './store';
// Import your root component here
// import App from './App';

  <Provider store={store}>
    {/*<App />*/}
    <div>Replace with your app component</div>
Renders the application and provides the Redux store to the React component tree. It should wrap the root App component inside the Provider from react-redux.

/* index.html */
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Redux DevTools with TypeScript</title>
    <div id="root"></div>
    <script src="./bundle.js"></script>
The HTML file serving as the entry point of the web application. It contains a root div where the React application will be mounted.

/* styles.css */
body {
  margin: 0;
  font-family: Arial, sans-serif;

#root {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
Basic CSS styling for the application. The root element is styled to center its children both horizontally and vertically.