prevent dispatching of further actions if asyncThunk has been cancelled, even if the payloadCreator didn't react to the abort request

Author: Lenz Weber

src/createAsyncThunk.test.ts

@@ -188,4 +188,38 @@ describe('createAsyncThunk with abortController', () => {
       })
     )
   })
+
+  test('even when the payloadCreator does not directly support the signal, no further actions ', async () => {
+    const unawareAsyncThunk = createAsyncThunk('unaware', async () => {
+      await new Promise(resolve => setTimeout(resolve, 100))
+      return 'finished'
+    })
+
+    const promise = store.dispatch(unawareAsyncThunk())
+    promise.abort('AbortReason')
+    const result = await promise
+
+    const expectedAbortedAction = {
+      type: 'unaware/rejected',
+      error: {
+        message: 'AbortReason',
+        name: 'AbortError'
+      }
+    }
+
+    // abortedAction with reason is dispatched after test/pending is dispatched
+    expect(store.getState()).toEqual([
+      expect.any(Object),
+      expect.objectContaining({ type: 'unaware/pending' }),
+      expect.objectContaining(expectedAbortedAction)
+    ])
+
+    // same abortedAction is returned, but with the AbortError from the abortablePayloadCreator
+    expect(result).toMatchObject(expectedAbortedAction)
+
+    // calling unwrapResult on the returned object re-throws the error from the abortablePayloadCreator
+    expect(() => unwrapResult(result)).toThrowError(
+      expect.objectContaining(expectedAbortedAction.error)
+    )
+  })
 })

src/createAsyncThunk.ts

@@ -178,20 +178,22 @@ export function createAsyncThunk<
           )
         } catch (err) {
           if (err && 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) }
+            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
-        dispatch(finalAction)
-        return finalAction
+
+        // 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
+        }
       })()
       return Object.assign(promise, { abort })
     }