Integrating TypeScript with Redux Store for Type Safety

Demonstrate how to integrate TypeScript with the Redux store for improved type safety and elimination of AnyAction.
import { createStore, Action, Reducer } from 'redux';

interface AppState {
  counter: number;

interface IncrementAction extends Action<'INCREMENT'> {}
interface DecrementAction extends Action<'DECREMENT'> {}

type AppAction = IncrementAction | DecrementAction;

const initialState: AppState = {
  counter: 0,

const reducer: Reducer<AppState, AppAction> = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, counter: state.counter + 1 };
    case 'DECREMENT':
      return { ...state, counter: state.counter - 1 };
      return state;

const store = createStore(reducer);

export default store;
Here we define the AppState interface to describe the shape of the application's state, and individual Action interfaces for each action type. We use a 'type' definition for AppAction that serves as a union of all action interfaces. The reducer is typed with both AppState and AppAction to ensure correct state and action types and is used to create the Redux store.
store.dispatch({ type: 'INCREMENT' });
store.dispatch({ type: 'DECREMENT' });
This part demonstrates dispatching actions of specific types to the store. The actions are type-checked against the AppAction union type, ensuring that they conform to the expected action structure.
import { Provider } from 'react-redux';
import store from './store';
import React from 'react';
import App from './App';

const Root: React.FC = () => (
  <Provider store={store}>
    <App />

export default Root;
This snippet integrates the Redux store with a React application by using the Provider component from react-redux. It wraps the App component ensuring that the store is available to all connected components in the component tree.