Rename thunk types and fields and export SerializedError

Author: markerikson

docs/api/createAsyncThunk.md

@@ -68,7 +68,7 @@ The `payloadCreator` function can contain whatever logic you need to calculate a
 
 The `payloadCreator` function will be called with two arguments:
 
-- `thunkArg`: a single value, containing the first parameter that was passed to the thunk action creator when it was dispatched. This is useful for passing in values like item IDs that may be needed as part of the request. If you need to pass in multiple values, pass them together in an object when you dispatch the thunk, like `dispatch(fetchUsers({status: 'active', sortBy: 'name'}))`.
+- `arg`: a single value, containing the first parameter that was passed to the thunk action creator when it was dispatched. This is useful for passing in values like item IDs that may be needed as part of the request. If you need to pass in multiple values, pass them together in an object when you dispatch the thunk, like `dispatch(fetchUsers({status: 'active', sortBy: 'name'}))`.
 - `thunkAPI`: an object containing all of the parameters that are normally passed to a Redux thunk function, as well as additional options:
   - `dispatch`: the Redux store `dispatch` method
   - `getState`: the Redux store `getState` method
@@ -110,7 +110,7 @@ interface PendingAction<ThunkArg> {
   payload: undefined
   meta: {
     requestId: string
-    thunkArg: ThunkArg
+    arg: ThunkArg
   }
 }
 
@@ -119,7 +119,7 @@ interface FulfilledAction<ThunkArg, PromiseResult> {
   payload: PromiseResult
   meta: {
     requestId: string
-    thunkArg: ThunkArg
+    arg: ThunkArg
   }
 }
 
@@ -129,26 +129,26 @@ interface RejectedAction<ThunkArg> {
   error: SerializedError | any
   meta: {
     requestId: string
-    thunkArg: ThunkArg
+    arg: ThunkArg
     aborted: boolean
     abortReason?: string
   }
 }
 
 type Pending = <ThunkArg>(
   requestId: string,
-  thunkArg: ThunkArg
+  arg: ThunkArg
 ) => PendingAction<ThunkArg>
 
 type Fulfilled = <ThunkArg, PromiseResult>(
   payload: PromiseResult,
   requestId: string,
-  thunkArg: ThunkArg
+  arg: ThunkArg
 ) => FulfilledAction<ThunkArg, PromiseResult>
 
 type Rejected = <ThunkArg>(
   requestId: string,
-  thunkArg: ThunkArg
+  arg: ThunkArg
 ) => RejectedAction<ThunkArg>
 ```
 

src/createAsyncThunk.test.ts

@@ -39,16 +39,16 @@ describe('createAsyncThunk', () => {
   it('accepts arguments and dispatches the actions on resolve', async () => {
     const dispatch = jest.fn()
 
-    let passedArgs: any
+    let passedArg: any
 
     const result = 42
     const args = 123
     let generatedRequestId = ''
 
     const thunkActionCreator = createAsyncThunk(
       'testType',
-      async (args: number, { requestId }) => {
-        passedArgs = args
+      async (arg: number, { requestId }) => {
+        passedArg = arg
         generatedRequestId = requestId
         return result
       }
@@ -58,7 +58,7 @@ describe('createAsyncThunk', () => {
 
     await thunkFunction(dispatch, undefined, undefined)
 
-    expect(passedArgs).toBe(args)
+    expect(passedArg).toBe(args)
 
     expect(dispatch).toHaveBeenNthCalledWith(
       1,
@@ -100,13 +100,11 @@ describe('createAsyncThunk', () => {
 
     expect(dispatch).toHaveBeenCalledTimes(2)
 
-    console.log(dispatch.mock.calls)
-
     // Have to check the bits of the action separately since the error was processed
     const errorAction = dispatch.mock.calls[1][0]
     expect(errorAction.error).toEqual(miniSerializeError(error))
     expect(errorAction.meta.requestId).toBe(generatedRequestId)
-    expect(errorAction.meta.args).toBe(args)
+    expect(errorAction.meta.arg).toBe(args)
   })
 })
 

src/createAsyncThunk.ts

@@ -2,22 +2,22 @@ import { Dispatch } from 'redux'
 import nanoid from 'nanoid'
 import { createAction } from './createAction'
 
-type AsyncThunksArgs<S, E, D extends Dispatch = Dispatch> = {
+type BaseThunkAPI<S, E, D extends Dispatch = Dispatch> = {
   dispatch: D
   getState: S
   extra: E
   requestId: string
   signal: AbortSignal
 }
 
-interface SimpleError {
+export interface SerializedError {
   name?: string
   message?: string
   stack?: string
   code?: string
 }
 
-const commonProperties: (keyof SimpleError)[] = [
+const commonProperties: (keyof SerializedError)[] = [
   'name',
   'message',
   'stack',
@@ -27,7 +27,7 @@ const commonProperties: (keyof SimpleError)[] = [
 // Reworked from https://github.com/sindresorhus/serialize-error
 export const miniSerializeError = (value: any): any => {
   if (typeof value === 'object' && value !== null) {
-    const simpleError: SimpleError = {}
+    const simpleError: SerializedError = {}
     for (const property of commonProperties) {
       if (typeof value[property] === 'string') {
         simpleError[property] = value[property]
@@ -50,63 +50,61 @@ export const miniSerializeError = (value: any): any => {
 export function createAsyncThunk<
   ActionType extends string,
   Returned,
-  ActionParams = void,
-  TA extends AsyncThunksArgs<any, any, any> = AsyncThunksArgs<
+  ThunkArg = void,
+  ThunkAPI extends BaseThunkAPI<any, any, any> = BaseThunkAPI<
     unknown,
     unknown,
     Dispatch
   >
 >(
   type: ActionType,
   payloadCreator: (
-    args: ActionParams,
-    thunkArgs: TA
+    arg: ThunkArg,
+    thunkAPI: ThunkAPI
   ) => Promise<Returned> | Returned
 ) {
   const fulfilled = createAction(
     type + '/fulfilled',
-    (result: Returned, requestId: string, args: ActionParams) => {
+    (result: Returned, requestId: string, arg: ThunkArg) => {
       return {
         payload: result,
-        meta: { args, requestId }
+        meta: { arg, requestId }
       }
     }
   )
 
   const pending = createAction(
     type + '/pending',
-    (requestId: string, args: ActionParams) => {
+    (requestId: string, arg: ThunkArg) => {
       return {
         payload: undefined,
-        meta: { args, requestId }
+        meta: { arg, requestId }
       }
     }
   )
 
   const rejected = createAction(
     type + '/rejected',
-    (error: Error, requestId: string, args: ActionParams) => {
+    (error: Error, requestId: string, arg: ThunkArg) => {
+      const aborted = error && error.name === 'AbortError'
       return {
         payload: undefined,
         error: miniSerializeError(error),
         meta: {
-          args,
+          arg,
           requestId,
-          ...(error &&
-            error.name === 'AbortError' && {
-              aborted: true,
-              abortReason: error.message
-            })
+          aborted,
+          abortReason: aborted ? error.message : undefined
         }
       }
     }
   )
 
-  function actionCreator(args: ActionParams) {
+  function actionCreator(arg: ThunkArg) {
     return (
-      dispatch: TA['dispatch'],
-      getState: TA['getState'],
-      extra: TA['extra']
+      dispatch: ThunkAPI['dispatch'],
+      getState: ThunkAPI['getState'],
+      extra: ThunkAPI['extra']
     ) => {
       const requestId = nanoid()
       const abortController = new AbortController()
@@ -117,26 +115,26 @@ export function createAsyncThunk<
         abortAction = rejected(
           { name: 'AbortError', message: reason },
           requestId,
-          args
+          arg
         )
         dispatch(abortAction)
       }
 
       const promise = (async function() {
         let finalAction: ReturnType<typeof fulfilled | typeof rejected>
         try {
-          dispatch(pending(requestId, args))
+          dispatch(pending(requestId, arg))
 
           finalAction = fulfilled(
-            await payloadCreator(args, {
+            await payloadCreator(arg, {
               dispatch,
               getState,
               extra,
               requestId,
               signal: abortController.signal
-            } as TA),
+            } as ThunkAPI),
             requestId,
-            args
+            arg
           )
         } catch (err) {
           if (err && err.name === 'AbortError' && abortAction) {
@@ -145,10 +143,10 @@ export function createAsyncThunk<
             // return a copy of the dispatched abortAction, but attach the AbortError to it.
             return { ...abortAction, error: miniSerializeError(err) }
           }
-          finalAction = rejected(err, requestId, args)
+          finalAction = rejected(err, requestId, arg)
         }
 
-        // We dispatch "success" _after_ the catch, to avoid having any errors
+        // We dispatch the result action _after_ the catch, to avoid having any errors
         // here get swallowed by the try/catch block,
         // per https://twitter.com/dan_abramov/status/770914221638942720
         // and https://redux-toolkit.js.org/tutorials/advanced-tutorial#async-error-handling-logic-in-thunks

src/index.ts

@@ -73,4 +73,8 @@ export {
   Comparer
 } from './entities/models'
 
-export { createAsyncThunk, unwrapResult } from './createAsyncThunk'
+export {
+  createAsyncThunk,
+  unwrapResult,
+  SerializedError
+} from './createAsyncThunk'