put abort on the promise returned by dispatch(asyncThunk())

Author: phryneas

etc/redux-toolkit.api.md

@@ -102,13 +102,20 @@ export function createAction<P = void, T extends string = string>(type: T): Payl
 export function createAction<PA extends PrepareAction<any>, T extends string = string>(type: T, prepareAction: PA): PayloadActionCreator<ReturnType<PA>['payload'], T, PA>;
 
 // @alpha (undocumented)
-export function createAsyncThunk<ActionType extends string, Returned, ActionParams = void, TA extends AsyncThunksArgs<any, any, any> = AsyncThunksArgs<unknown, unknown, Dispatch>>(type: ActionType, payloadCreator: (args: ActionParams, thunkArgs: TA) => Promise<Returned> | Returned): ((args: ActionParams) => ((dispatch: TA["dispatch"], getState: TA["getState"], extra: TA["extra"]) => Promise<import("./createAction").PayloadAction<Returned, string, {
+export function createAsyncThunk<ActionType extends string, Returned, ActionParams = void, TA extends AsyncThunksArgs<any, any, any> = AsyncThunksArgs<unknown, unknown, Dispatch>>(type: ActionType, payloadCreator: (args: ActionParams, thunkArgs: TA) => Promise<Returned> | Returned): ((args: ActionParams) => (dispatch: TA["dispatch"], getState: TA["getState"], extra: TA["extra"]) => Promise<import("./createAction").PayloadAction<undefined, string, {
     args: ActionParams;
     requestId: string;
-}, never> | import("./createAction").PayloadAction<undefined, string, {
+    aborted: boolean;
+    abortReason: string;
+} | {
+    args: ActionParams;
+    requestId: string;
+    aborted?: undefined;
+    abortReason?: undefined;
+}, any> | import("./createAction").PayloadAction<Returned, string, {
     args: ActionParams;
     requestId: string;
-}, any>>) & {
+}, never>> & {
     abort: (reason?: string) => void;
 }) & {
     pending: import("./createAction").ActionCreatorWithPreparedPayload<[string, ActionParams], undefined, string, never, {
@@ -118,6 +125,13 @@ export function createAsyncThunk<ActionType extends string, Returned, ActionPara
     rejected: import("./createAction").ActionCreatorWithPreparedPayload<[Error, string, ActionParams], undefined, string, any, {
         args: ActionParams;
         requestId: string;
+        aborted: boolean;
+        abortReason: string;
+    } | {
+        args: ActionParams;
+        requestId: string;
+        aborted?: undefined;
+        abortReason?: undefined;
     }>;
     fulfilled: import("./createAction").ActionCreatorWithPreparedPayload<[Returned, string, ActionParams], Returned, string, never, {
         args: ActionParams;

src/createAsyncThunk.test.ts

@@ -155,9 +155,8 @@ describe('createAsyncThunk with abortController', () => {
   })
 
   test('abort after dispatch', async () => {
-    const thunkAction = asyncThunk({})
-    const promise = store.dispatch(thunkAction)
-    thunkAction.abort('AbortReason')
+    const promise = store.dispatch(asyncThunk({}))
+    promise.abort('AbortReason')
     const result = await promise
     const expectedAbortedAction = {
       type: 'test/rejected',
@@ -191,29 +190,4 @@ describe('createAsyncThunk with abortController', () => {
       })
     )
   })
-
-  test('abort before dispatch', async () => {
-    const thunkAction = asyncThunk({})
-    thunkAction.abort('AbortReason')
-    const result = await store.dispatch(thunkAction)
-
-    const expectedAbortedAction = {
-      type: 'test/rejected',
-      error: {
-        message: 'AbortReason',
-        name: 'AbortError'
-      },
-      meta: { aborted: true, abortReason: 'AbortReason' }
-    }
-    // abortedAction with reason is dispatched without test/pending being dispatched
-    expect(store.getState()).toMatchObject([{}, expectedAbortedAction])
-
-    // same abortedAction is returned
-    expect(result).toMatchObject(expectedAbortedAction)
-
-    // unwrapResult throws AbortedError from returned action
-    expect(() => unwrapResult(result)).toThrowError(
-      expect.objectContaining(expectedAbortedAction.error)
-    )
-  })
 })

src/createAsyncThunk.ts

@@ -104,83 +104,63 @@ export function createAsyncThunk<
   function actionCreator(args: ActionParams) {
     const abortController = new AbortController()
 
-    let dispatchAbort:
-      | undefined
-      | ((reason: string) => ReturnType<typeof rejected>)
-
-    let abortReason: string
-
-    function abort(reason: string = 'Aborted.') {
-      abortController.abort()
-      if (dispatchAbort) {
-        dispatchAbort(reason)
-      } else {
-        abortReason = reason
-      }
-    }
-
-    async function thunkAction(
+    return function thunkAction(
       dispatch: TA['dispatch'],
       getState: TA['getState'],
       extra: TA['extra']
     ) {
       const requestId = nanoid()
       let abortAction: ReturnType<typeof rejected> | undefined
-      dispatchAbort = reason => {
+
+      function abort(reason: string = 'Aborted.') {
+        abortController.abort()
         abortAction = rejected(
           new DOMException(reason, 'AbortError'),
           requestId,
           args
         )
         dispatch(abortAction)
-        return abortAction
-      }
-      // if the thunkAction.abort() method has been called before the thunkAction was dispatched,
-      // just dispatch an aborted-action and never start with the thunk
-      if (abortController.signal.aborted) {
-        return dispatchAbort(abortReason)
       }
 
-      let finalAction: ReturnType<typeof fulfilled | typeof rejected>
-      try {
-        dispatch(pending(requestId, args))
-
-        finalAction = fulfilled(
-          await payloadCreator(args, {
-            dispatch,
-            getState,
-            extra,
+      const promise = (async function() {
+        let finalAction: ReturnType<typeof fulfilled | typeof rejected>
+        try {
+          dispatch(pending(requestId, args))
+
+          finalAction = fulfilled(
+            await payloadCreator(args, {
+              dispatch,
+              getState,
+              extra,
+              requestId,
+              signal: abortController.signal
+            } as TA),
             requestId,
-            signal: abortController.signal
-          } as TA),
-          requestId,
-          args
-        )
-      } catch (err) {
-        if (
-          err instanceof DOMException &&
-          err.name === 'AbortError' &&
-          abortAction
-        ) {
-          // abortAction has already been dispatched, no further action should be dispatched
-          // by this thunk.
-          // return a copy of the dispatched abortAction, but attach the AbortError to it.
-          return Object.assign({}, abortAction, {
-            error: miniSerializeError(err)
-          })
+            args
+          )
+        } catch (err) {
+          if (
+            err instanceof DOMException &&
+            err.name === 'AbortError' &&
+            abortAction
+          ) {
+            // abortAction has already been dispatched, no further action should be dispatched
+            // by this thunk.
+            // 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, args)
-      }
 
-      // We dispatch "success" _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
-      dispatch(finalAction)
-      return finalAction
+        // We dispatch "success" _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
+        dispatch(finalAction)
+        return finalAction
+      })()
+      return Object.assign(promise, { abort })
     }
-
-    return Object.assign(thunkAction, { abort })
   }
 
   return Object.assign(actionCreator, {