Typescript + redux + redux-thunk + react-navigation typings example

types-for-redux.ts

import {Action as ReduxAction, Middleware as ReduxMiddleware, Store as ReduxStore} from 'redux';
import {NavigationState, NavigationScreenProp} from 'react-navigation';
import {ThunkAction, ThunkDispatch} from 'redux-thunk';
import {StateType} from 'typesafe-actions';
import {reducers} from 'store/reducers/root.reducer';

export type AppState = StateType<typeof reducers>;

export interface Action<T = any, P extends object = any, M = any> extends ReduxAction<T> {
    payload?: P;
    meta?: M | null;
    error?: boolean;
}

export type Thunk<R = any> = ThunkAction<R, AppState, undefined, Action>;
export type Dispatch = ThunkDispatch<AppState, undefined, Action>;
export type Store = ReduxStore<AppState, Action>;
export type Middleware = ReduxMiddleware<undefined, AppState, Dispatch>;
export type NavigationProp = NavigationScreenProp<NavigationState>;
  
// How to use
// 1. Some connected component
//...
export default connect((state: AppState) => ({ bar: state.foo.bar })(SomeComponent);

// 2. Action creators
export const feedRequestInitialItems = (): Thunk<Promise<void>> => (dispatch, getState) => {
  dispatch({...});
  return Promise.resolve();
}

// 3. Middlewares
const metricaMiddleware: Middleware = ({dispatch, getState}) => {
  return (next) => (action) => next(action);
}