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
  }
}

@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 where it is defined. Not sure how much I can help you there.

@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> .