Redux Thunk Helpers

helpers.ts

import * as Redux from 'redux'
import { ThunkAction } from 'redux-thunk'
import { Store } from './store'

export type Status = 'pending' | 'success' | 'fail'

export interface Request {
    status: Status
    error?: string
}

export interface LoadEndpoint<T> extends Redux.Action {
    type: string
    request: Request
    data: T
}

type Creator = (dispatch: Redux.Dispatch<Store>, getState: () => Store) => void

export function thunk (creator: Creator): ThunkAction<void, Store, null> {
  return (dispatch, getState) => {
    /** define and then call an async function */
    (async (dispatch, getState) => {
      await creator(dispatch, getState)
    })(dispatch, getState).catch(error => {
      console.error(error)
    })
  }
}

export function loadEndpoint<T> (endpoint: Promise<T>, type: string, fallbackData: any) {
  return thunk(async (dispatch, getState) => {
    dispatch<LoadEndpoint<T>>({ type, request: { status: "pending" }, data: fallbackData})
    await endpoint.then( data => {
      dispatch<LoadEndpoint<T>>({ type, request: {status: "success"}, data })
    }, why => dispatch<LoadEndpoint<T>>({type, request: { status: "fail", error: why}, data: fallbackData}))
  })
}