React and Redux Setup in Typescript

src_App.tsx

import React from 'react';
import { getStore } from './store';
import { Provider } from 'react-redux';
import Component from './components/Component'

const App = () => {
  const store = getStore()
  
  return (
    <Provider store={store}>
      <Component />
    </Provider>
  )
}

src_components_Component.tsx

import React from 'react';
import { connect } from 'react-redux';
// Clean this import path using .env src config or using webpack alias
import * as actions from '../../../store/user/actions';
import { User as UserType } from '../../../store/user/reducer';
// The below is also another way to import actions. Just replace `actions` in map dispatch argument to { setUserName }
// import { setUserName } from '../../store/user/actions';

// from reading comment on src_store_user_reducer.ts line 7. If was on file, we can refactor to calling it from one location to avoid duplicating for other components.
type Action = {
  type: string;
  payload: any;
};

interface Props {
  user: UserType;
  setUserName: (name: string) => Action;
}

const Component: React.FunctionComponent<Props> = ({ user, setUserName }) => (
  <>
    <h1>{user.name}</h1>
    <input
      onChange={(e) => {
        setUserName(e.currentTarget.value);
      }}
    />
  </>
);

const mapStateToProps = (state: any) => {
  return {
    user: state.user,
  };
};

export default connect(mapStateToProps, actions)(Component);

src_store_index.ts

export { default as getStore } from './store';

src_store_reducers.ts

import { combineReducers } from 'redux';
import user from './user/reducer';

const reducer = combineReducers({
  user,
});

export default reducer;

src_store_store.ts

import { createStore, applyMiddleware, compose } from 'redux';
import reduxThunk from 'redux-thunk';
import reducers from './reducers';

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

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

export default (initialState = {}) => {
  return createStore(reducers, initialState, composeEnhancers(applyMiddleware(reduxThunk)));
};

src_store_user_actions.ts

import { USER_SET_NAME } from './constants';

export const setUserName = (name: string) => ({
  type: USER_SET_NAME,
  payload: name,
});

src_store_user_constants.ts

export const USER_SET_NAME = 'USER_SET_NAME';

src_store_user_reducer.ts

import { USER_SET_NAME } from './constants';

export type User = {
  name: string;
};

// Can refactor this into own file to reduce repeating to other reducers
type Action = {
  type: string;
  payload: any;
};

const INITIAL_STATE = {
  name: '',
};

export default (
  state: User = INITIAL_STATE,
  action: Action = { type: '', payload: false }
) => {
  switch (action.type) {
    case USER_SET_NAME:
      return { ...state, name: action.payload };
    default:
      return state;
  }
};