* add race between payloadCreator and abortedPromise

* simplify createAsyncThunk
* remove complicated logic where an AbortError thrown from the `payloadCreator` could influence the return value

Author: Lenz Weber

src/createAsyncThunk.test.ts

@@ -162,7 +162,7 @@ describe('createAsyncThunk with abortController', () => {
         message: 'AbortReason',
         name: 'AbortError'
       },
-      meta: { aborted: true, abortReason: 'AbortReason' }
+      meta: { aborted: true }
     }
     // abortedAction with reason is dispatched after test/pending is dispatched
     expect(store.getState()).toMatchObject([
@@ -172,24 +172,15 @@ describe('createAsyncThunk with abortController', () => {
     ])
 
     // same abortedAction is returned, but with the AbortError from the abortablePayloadCreator
-    expect(result).toMatchObject({
-      ...expectedAbortedAction,
-      error: {
-        message: 'Was aborted while running',
-        name: 'AbortError'
-      }
-    })
+    expect(result).toMatchObject(expectedAbortedAction)
 
     // calling unwrapResult on the returned object re-throws the error from the abortablePayloadCreator
     expect(() => unwrapResult(result)).toThrowError(
-      expect.objectContaining({
-        message: 'Was aborted while running',
-        name: 'AbortError'
-      })
+      expect.objectContaining(expectedAbortedAction.error)
     )
   })
 
-  test('even when the payloadCreator does not directly support the signal, no further actions ', async () => {
+  test('even when the payloadCreator does not directly support the signal, no further actions are dispatched', async () => {
     const unawareAsyncThunk = createAsyncThunk('unaware', async () => {
       await new Promise(resolve => setTimeout(resolve, 100))
       return 'finished'
@@ -222,4 +213,24 @@ describe('createAsyncThunk with abortController', () => {
       expect.objectContaining(expectedAbortedAction.error)
     )
   })
+
+  test('dispatch(asyncThunk) returns on abort and does not wait for the promiseProvider to finish', async () => {
+    let running = false
+    const longRunningAsyncThunk = createAsyncThunk('longRunning', async () => {
+      running = true
+      await new Promise(resolve => setTimeout(resolve, 30000))
+      running = false
+    })
+
+    const promise = store.dispatch(longRunningAsyncThunk())
+    expect(running).toBeTruthy()
+    promise.abort()
+    const result = await promise
+    expect(running).toBeTruthy()
+    expect(result).toMatchObject({
+      type: 'longRunning/rejected',
+      error: { message: 'Aborted.', name: 'AbortError' },
+      meta: { aborted: true }
+    })
+  })
 })

src/createAsyncThunk.ts

@@ -133,8 +133,7 @@ export function createAsyncThunk<
         meta: {
           arg,
           requestId,
-          aborted,
-          abortReason: aborted ? error.message : undefined
+          aborted
         }
       }
     }
@@ -147,53 +146,47 @@ export function createAsyncThunk<
       extra: GetExtra<ThunkApiConfig>
     ) => {
       const requestId = nanoid()
+
       const abortController = new AbortController()
-      let abortAction: ReturnType<typeof rejected> | undefined
+      let abortReason: string | undefined
 
-      function abort(reason: string = 'Aborted.') {
-        abortController.abort()
-        abortAction = rejected(
-          { name: 'AbortError', message: reason },
-          requestId,
-          arg
+      const abortedPromise = new Promise<never>((_, reject) =>
+        abortController.signal.addEventListener('abort', () =>
+          reject({ name: 'AbortError', message: abortReason || 'Aborted.' })
         )
-        dispatch(abortAction)
+      )
+
+      function abort(reason?: string) {
+        abortReason = reason
+        abortController.abort()
       }
 
       const promise = (async function() {
         let finalAction: ReturnType<typeof fulfilled | typeof rejected>
         try {
           dispatch(pending(requestId, arg))
-
-          finalAction = fulfilled(
-            await payloadCreator(arg, {
-              dispatch,
-              getState,
-              extra,
-              requestId,
-              signal: abortController.signal
-            }),
-            requestId,
-            arg
-          )
+          finalAction = await Promise.race([
+            abortedPromise,
+            Promise.resolve(
+              payloadCreator(arg, {
+                dispatch,
+                getState,
+                extra,
+                requestId,
+                signal: abortController.signal
+              })
+            ).then(result => fulfilled(result, requestId, arg))
+          ])
         } catch (err) {
-          if (err && err.name === 'AbortError' && abortAction) {
-            abortAction = { ...abortAction, error: miniSerializeError(err) }
-          }
           finalAction = rejected(err, requestId, arg)
         }
         // 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
 
-        // If abortAction has been set, we return that and do not dispatch any more fulfilled/rejected actions.
-        if (abortAction) {
-          return abortAction
-        } else {
-          dispatch(finalAction)
-          return finalAction
-        }
+        dispatch(finalAction)
+        return finalAction
       })()
       return Object.assign(promise, { abort })
     }