fix unwrapResult behaviour (#704)

* fix unwrapResult behaviour
this fixes #701

* fix inconsistent type, add api report

* udpate docs

* remove another useless `unwrapResult`

Author: Lenz Weber

docs/api/createAsyncThunk.mdx

@@ -234,7 +234,7 @@ const onClick = () => {
 
 The thunks generated by `createAsyncThunk` **will always return a resolved promise** with either the `fulfilled` action object or `rejected` action object inside, as appropriate.
 
-The calling logic may wish to treat these actions as if they were the original promise contents. Redux Toolkit exports an `unwrapResult` function that can be used to extract the `payload` or `error` from the action, and return or throw the result appropriately:
+The calling logic may wish to treat these actions as if they were the original promise contents. Redux Toolkit exports an `unwrapResult` function that can be used to extract the `payload` of a `fulfilled` action or to throw either the `error` or, if available, `payload` created by `rejectWithValue` from a `rejected` action:
 
 ```js
 import { unwrapResult } from '@reduxjs/toolkit'
@@ -244,7 +244,7 @@ const onClick = () => {
   dispatch(fetchUserById(userId))
     .then(unwrapResult)
     .then(originalPromiseResult => {})
-    .catch(serializedError => {})
+    .catch(rejectedValueOrSerializedError => {})
 }
 ```
 
@@ -437,7 +437,7 @@ const fetchUserById = createAsyncThunk(
 - Requesting a user by ID, with loading state, and only one request at a time:
 
 ```js
-import { createAsyncThunk, createSlice, unwrapResult } from '@reduxjs/toolkit'
+import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'
 import { userAPI } from './userAPI'
 
 const fetchUserById = createAsyncThunk(
@@ -494,7 +494,7 @@ const UsersComponent = () => {
   const fetchOneUser = async userId => {
     try {
       const resultAction = await dispatch(fetchUserById(userId))
-      const user = unwrapResult(resultAction)
+      const user = resultAction.payload
       showToast('success', `Fetched ${user.name}`)
     } catch (err) {
       showToast('error', `Fetch failed: ${err.message}`)

docs/usage/usage-with-typescript.md

@@ -582,7 +582,7 @@ const usersSlice = createSlice({
 const handleUpdateUser = async userData => {
   const resultAction = await dispatch(updateUser(userData))
   if (updateUser.fulfilled.match(resultAction)) {
-    const user = unwrapResult(resultAction)
+    const user = resultAction.payload
     showToast('success', `Updated ${user.name}`)
   } else {
     if (resultAction.payload) {

etc/redux-toolkit.api.md

@@ -71,15 +71,7 @@ export type AsyncThunk<Returned, ThunkArg, ThunkApiConfig extends AsyncThunkConf
 };
 
 // @public
-export type AsyncThunkAction<Returned, ThunkArg, ThunkApiConfig extends AsyncThunkConfig> = (dispatch: GetDispatch<ThunkApiConfig>, getState: () => GetState<ThunkApiConfig>, extra: GetExtra<ThunkApiConfig>) => Promise<PayloadAction<Returned, string, {
-    arg: ThunkArg;
-    requestId: string;
-}> | PayloadAction<undefined | GetRejectValue<ThunkApiConfig>, string, {
-    arg: ThunkArg;
-    requestId: string;
-    aborted: boolean;
-    condition: boolean;
-}, SerializedError>> & {
+export type AsyncThunkAction<Returned, ThunkArg, ThunkApiConfig extends AsyncThunkConfig> = (dispatch: GetDispatch<ThunkApiConfig>, getState: () => GetState<ThunkApiConfig>, extra: GetExtra<ThunkApiConfig>) => Promise<ReturnType<AsyncThunkFulfilledActionCreator<Returned, ThunkArg>> | ReturnType<AsyncThunkRejectedActionCreator<ThunkArg, ThunkApiConfig>>> & {
     abort(reason?: string): void;
     requestId: string;
     arg: ThunkArg;
@@ -398,7 +390,7 @@ export { ThunkAction }
 export { ThunkDispatch }
 
 // @public (undocumented)
-export function unwrapResult<R extends ActionTypesWithOptionalErrorAction>(returned: R): PayloadForActionTypesExcludingErrorActions<R>;
+export function unwrapResult<R extends UnwrappableAction>(action: R): UnwrappedActionPayload<R>;
 
 // @public (undocumented)
 export type Update<T> = {

src/createAsyncThunk.test.ts

@@ -587,6 +587,7 @@ describe('conditional skipping of asyncThunks', () => {
         meta: {
           aborted: false,
           arg: arg,
+          rejectedWithValue: false,
           condition: true,
           requestId: expect.stringContaining('')
         },
@@ -596,3 +597,42 @@ describe('conditional skipping of asyncThunks', () => {
     )
   })
 })
+describe('unwrapResult', () => {
+  const getState = jest.fn(() => ({}))
+  const dispatch = jest.fn((x: any) => x)
+  const extra = {}
+  test('fulfilled case', async () => {
+    const asyncThunk = createAsyncThunk('test', () => {
+      return 'fulfilled!'
+    })
+
+    const unwrapPromise = asyncThunk()(dispatch, getState, extra).then(
+      unwrapResult
+    )
+
+    await expect(unwrapPromise).resolves.toBe('fulfilled!')
+  })
+  test('error case', async () => {
+    const error = new Error('Panic!')
+    const asyncThunk = createAsyncThunk('test', () => {
+      throw error
+    })
+
+    const unwrapPromise = asyncThunk()(dispatch, getState, extra).then(
+      unwrapResult
+    )
+
+    await expect(unwrapPromise).rejects.toEqual(miniSerializeError(error))
+  })
+  test('rejectWithValue case', async () => {
+    const asyncThunk = createAsyncThunk('test', (_, { rejectWithValue }) => {
+      return rejectWithValue('rejectWithValue!')
+    })
+
+    const unwrapPromise = asyncThunk()(dispatch, getState, extra).then(
+      unwrapResult
+    )
+
+    await expect(unwrapPromise).rejects.toBe('rejectWithValue!')
+  })
+})

src/createAsyncThunk.ts

@@ -43,7 +43,9 @@ const commonProperties: Array<keyof SerializedError> = [
 ]
 
 class RejectWithValue<RejectValue> {
-  constructor(public readonly value: RejectValue) {}
+  public name = 'RejectWithValue'
+  public message = 'Rejected'
+  constructor(public readonly payload: RejectValue) {}
 }
 
 // Reworked from https://github.com/sindresorhus/serialize-error
@@ -148,18 +150,8 @@ export type AsyncThunkAction<
   getState: () => GetState<ThunkApiConfig>,
   extra: GetExtra<ThunkApiConfig>
 ) => Promise<
-  | PayloadAction<Returned, string, { arg: ThunkArg; requestId: string }>
-  | PayloadAction<
-      undefined | GetRejectValue<ThunkApiConfig>,
-      string,
-      {
-        arg: ThunkArg
-        requestId: string
-        aborted: boolean
-        condition: boolean
-      },
-      SerializedError
-    >
+  | ReturnType<AsyncThunkFulfilledActionCreator<Returned, ThunkArg>>
+  | ReturnType<AsyncThunkRejectedActionCreator<ThunkArg, ThunkApiConfig>>
 > & {
   abort(reason?: string): void
   requestId: string
@@ -234,18 +226,14 @@ type AsyncThunkRejectedActionCreator<
   ThunkArg,
   ThunkApiConfig
 > = ActionCreatorWithPreparedPayload<
-  [
-    Error | null,
-    string,
-    ThunkArg,
-    (GetRejectValue<ThunkApiConfig> | undefined)?
-  ],
+  [Error | null, string, ThunkArg],
   GetRejectValue<ThunkApiConfig> | undefined,
   string,
   SerializedError,
   {
     arg: ThunkArg
     requestId: string
+    rejectedWithValue: boolean
     aborted: boolean
     condition: boolean
   }
@@ -323,20 +311,18 @@ export function createAsyncThunk<
 
   const rejected = createAction(
     typePrefix + '/rejected',
-    (
-      error: Error | null,
-      requestId: string,
-      arg: ThunkArg,
-      payload?: RejectedValue
-    ) => {
+    (error: Error | null, requestId: string, arg: ThunkArg) => {
+      const rejectedWithValue = error instanceof RejectWithValue
       const aborted = !!error && error.name === 'AbortError'
       const condition = !!error && error.name === 'ConditionError'
+
       return {
-        payload,
-        error: miniSerializeError(error || 'Rejected'),
+        payload: error instanceof RejectWithValue ? error.payload : undefined,
+        error: miniSerializeError(error),
         meta: {
           arg,
           requestId,
+          rejectedWithValue,
           aborted,
           condition
         }
@@ -426,7 +412,7 @@ If you want to use the AbortController to react to \`abort\` events, please cons
               })
             ).then(result => {
               if (result instanceof RejectWithValue) {
-                return rejected(null, requestId, arg, result.value)
+                return rejected(result, requestId, arg)
               }
               return fulfilled(result, requestId, arg)
             })
@@ -469,25 +455,30 @@ If you want to use the AbortController to react to \`abort\` events, please cons
   )
 }
 
-type ActionTypesWithOptionalErrorAction =
-  | { error: any }
-  | { error?: never; payload: any }
-type PayloadForActionTypesExcludingErrorActions<T> = T extends { error: any }
-  ? never
-  : T extends { payload: infer P }
-  ? P
-  : never
+interface UnwrappableAction {
+  payload: any
+  meta?: any
+  error?: any
+}
+
+type UnwrappedActionPayload<T extends UnwrappableAction> = Exclude<
+  T,
+  { error: any }
+>['payload']
 
 /**
  * @public
  */
-export function unwrapResult<R extends ActionTypesWithOptionalErrorAction>(
-  returned: R
-): PayloadForActionTypesExcludingErrorActions<R> {
-  if ('error' in returned) {
-    throw returned.error
+export function unwrapResult<R extends UnwrappableAction>(
+  action: R
+): UnwrappedActionPayload<R> {
+  if (action.meta && action.meta.rejectedWithValue) {
+    throw action.payload
+  }
+  if (action.error) {
+    throw action.error
   }
-  return (returned as any).payload
+  return action.payload
 }
 
 type WithStrictNullChecks<True, False> = undefined extends boolean

type-tests/files/createAsyncThunk.typetest.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-lone-blocks */
 import { createAsyncThunk, Dispatch, createReducer, AnyAction } from 'src'
 import { ThunkDispatch } from 'redux-thunk'
 import { unwrapResult, SerializedError } from 'src/createAsyncThunk'
@@ -129,6 +130,10 @@ const defaultDispatch = (() => {}) as ThunkDispatch<{}, any, AnyAction>
   } else {
     expectType<ReturnValue>(returned.payload)
   }
+
+  expectType<ReturnValue>(unwrapResult(returned))
+  // typings:expect-error
+  expectType<RejectValue>(unwrapResult(returned))
 })()
 
 {
@@ -184,6 +189,19 @@ const defaultDispatch = (() => {}) as ThunkDispatch<{}, any, AnyAction>
         expectType<IsAny<typeof result['error'], true, false>>(true)
       }
     }
+    defaultDispatch(fetchLiveCallsError('asd'))
+      .then(result => {
+        expectType<Item[] | ErrorFromServer | undefined>(result.payload)
+        // typings:expect-error
+        expectType<Item[]>(unwrapped)
+        return result
+      })
+      .then(unwrapResult)
+      .then(unwrapped => {
+        expectType<Item[]>(unwrapped)
+        // typings:expect-error
+        expectType<ErrorFromServer>(unwrapResult(unwrapped))
+      })
   })
 }