seansean11 · January 25, 2023 19:03 · n3rd253 · Apr 24, 2019 · seansean11 · Apr 24, 2019
diff --git a/store-types.ts b/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
 }
diff --git a/user-actions.ts b/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
  }
 }
	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
	}
	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
	}
	}