Typescript Redux actionTypes

action-types.ts

import { Dispatch } from 'redux';

type StoreState = any; // preferable this should be the real Type of the store

/** Default action with just the type */
interface Action<T extends string> {
    readonly type: T;
}

/** Action extended with a payload that could be any value, used for the reducer */
interface ActionWithPayload<T extends string, P> extends Action<T> {
    payload: P;
}

/** Factory for an action with the correct ReturnType so Typescript can process it */
export function createAction<T extends string>(type: T): Action<T>;
export function createAction<T extends string, P>(type: T, payload: P): ActionWithPayload<T, P>;
export function createAction<T extends string, P>(type: T, payload?: P) {
    return payload === undefined
        ? { type }
        : { type, payload };
}

interface ThunkAction<R, S> {
    (dispatch: Dispatch<Action<any>>, getState: () => S): R;
}

export function createThunkAction<R, S = StoreState>(thunkAction: ThunkAction<R, S>) {
    // set the Type to unknown. This function is passed through
    // `redux-thunk` and so the return value should be the type
    // Due the original Dispatch method not having the correct
    // ReturnType this is an alternative way to get it
    const processedThunkAction = thunkAction as unknown;

    return processedThunkAction as R;
}

usage.ts

/*
 * createAction will return an object with 'type' and 'payload',
 * the payload is only set in the type when a second argument is set.
 * 
 * Additionally you can get the below ActionType by using `type SetNameAction = ReturnType<typeof setName>`
 */
// 
const setName = (name: string) => createAction('SET_NAME', name);

/*
 * A thunkAction normally returns a function that might return a value. But
 * if this is used in the store.dispatch the ReturnType is the thunkAction.
 * `createThunkAction` changes the ReturnType to be the ReturnType of the
 * ThunkAction as expected
 */
const fetchName = (name: string) => createThunkAction((dispatch, getState) => {
  const name = getNameFromSomewhere();
  dispatch(setName(name));
});