Using Redux Thunk with Typescript (example)

store-types.ts

import { ActionCreator } from 'redux'
import { ThunkAction } from 'redux-thunk'
import { WebService } from 'app/services/WebService'

// Create this reusable type that can be imported into your redux action files
export type ThunkResult<R> = ThunkAction<R, RootState, Services, RootAction>

// Services are only necesarry because we are using
// `reduxThunk.withExtraArgument({ webService }))` when we are creating our store.
export type Services = {
  webService: WebService
}

// Union type of all of your actions
export type RootAction = UserAction

// Interface of your root Redux state
export interface RootState {
  readonly user: UserState
}

// Enum of your action types
export enum ActionType {
  UserUpdate = 'USER_UPDATE',
}

export interface UserAction {
  readonly type: ActionType
  readonly user: Partial<UserState>
}

export interface UserState {
  readonly groups: Array<string>
  readonly isLoading: boolean
}

user-actions.ts

import {
  Thunk,
  ActionType,
  UserAction,
  UserState,
} from './storeTypes'

export const updateUser = (user: Partial<UserState>): UserAction => ({
  type: ActionType.UserUpdate,
  user
})

// ***** USING THUNKRESULT TYPE HERE ***** //
// this ThunkResult is `void` because it doesn't return anything
// if you return something from the thunk, replace `void` with the return value `ThunkResult<void>` 
export const login = (email: string, password: string): ThunkResult<void> => async (
  dispatch,
  getState,
  { webService }
) => {
  try {
    const { jwt, groups } = await webService.signIn(
      email,
      password
    )
    webService.setBearerToken(jwt)
    dispatch(updateUser({ groups }))
  } catch (err) {
    throw err
  }
}

@seansean11 It ended up being that I needed to declare as below, because its a class. Appreciate the gist and responses!! :) const ThreeDeeMartStore = createStore(rootReducer, applyMiddleware(thunk. withExtraArgument({ sketchfabClient: new SketchfabClient() })));

…

On Wed, Apr 24, 2019 at 2:27 PM Sean Michael ***@***.***> wrote: @n3rd253 <https://github.com/n3rd253> your issue is unrelated to this Gist. I would check that you are importing your service correctly where you are using it and make sure it is exported correctly from the module. Not sure how much I can help you there. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <https://gist.github.com/196c436988c1fdf4b22cde308c492fe5#gistcomment-2897593>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AE5CDSDYBURKPAZXTVA5LRLPSDGERANCNFSM4HHZB32Q> .