add experimental createAsyncThunk.rejectWithValue

Author: phryneas

etc/redux-toolkit.api.md

@@ -103,31 +103,37 @@ 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<Returned, ThunkArg = void, ThunkApiConfig extends AsyncThunkConfig = {}>(type: string, payloadCreator: (arg: ThunkArg, thunkAPI: GetThunkAPI<ThunkApiConfig>) => Promise<Returned> | Returned): ((arg: ThunkArg) => (dispatch: GetDispatch<ThunkApiConfig>, getState: () => GetState<ThunkApiConfig>, extra: GetExtra<ThunkApiConfig>) => Promise<PayloadAction<Returned, string, {
+export function createAsyncThunk<Returned, ThunkArg = void, ThunkApiConfig extends AsyncThunkConfig = {}>(type: string, payloadCreator: (arg: ThunkArg, thunkAPI: GetThunkAPI<ThunkApiConfig>) => Promise<Returned> | Returned | Promise<RejectWithValue<GetRejectValue<ThunkApiConfig>>> | RejectWithValue<GetRejectValue<ThunkApiConfig>>): ((arg: ThunkArg) => (dispatch: GetDispatch<ThunkApiConfig>, getState: () => GetState<ThunkApiConfig>, extra: GetExtra<ThunkApiConfig>) => Promise<PayloadAction<Returned, string, {
     arg: ThunkArg;
     requestId: string;
-}, never> | PayloadAction<undefined, string, {
+}, never> | PayloadAction<GetRejectValue<ThunkApiConfig> | undefined, string, {
     arg: ThunkArg;
     requestId: string;
-    aborted: boolean;
+    aborted: boolean | null;
 }, any>> & {
     abort: (reason?: string | undefined) => void;
 }) & {
     pending: ActionCreatorWithPreparedPayload<[string, ThunkArg], undefined, string, never, {
         arg: ThunkArg;
         requestId: string;
     }>;
-    rejected: ActionCreatorWithPreparedPayload<[Error, string, ThunkArg], undefined, string, any, {
+    rejected: ActionCreatorWithPreparedPayload<[Error | null, string, ThunkArg, (GetRejectValue<ThunkApiConfig> | undefined)?], GetRejectValue<ThunkApiConfig> | undefined, string, any, {
         arg: ThunkArg;
         requestId: string;
-        aborted: boolean;
+        aborted: boolean | null;
     }>;
     fulfilled: ActionCreatorWithPreparedPayload<[Returned, string, ThunkArg], Returned, string, never, {
         arg: ThunkArg;
         requestId: string;
     }>;
 };
 
+// @public (undocumented)
+export namespace createAsyncThunk {
+    var // (undocumented)
+    rejectWithValue: <RejectValue>(value: RejectValue) => RejectWithValue<RejectValue>;
+}
+
 // @alpha (undocumented)
 export function createEntityAdapter<T>(options?: {
     selectId?: IdSelector<T>;

src/createAsyncThunk.ts

@@ -29,13 +29,30 @@ export interface SerializedError {
   code?: string
 }
 
-const commonProperties: (keyof SerializedError)[] = [
+const commonProperties: Array<keyof SerializedError> = [
   'name',
   'message',
   'stack',
   'code'
 ]
 
+const rejectionSymbol: unique symbol = Symbol('rejectWithValue')
+type RejectWithValue<RejectValue> = {
+  [rejectionSymbol]: 'reject'
+  value: RejectValue
+}
+function rejectWithValue<RejectValue>(
+  value: RejectValue
+): RejectWithValue<RejectValue> {
+  return {
+    [rejectionSymbol]: 'reject',
+    value
+  }
+}
+function isRejectWithValue(value: any): value is RejectWithValue<unknown> {
+  return value[rejectionSymbol] === 'reject'
+}
+
 // Reworked from https://github.com/sindresorhus/serialize-error
 export const miniSerializeError = (value: any): any => {
   if (typeof value === 'object' && value !== null) {
@@ -56,6 +73,7 @@ type AsyncThunkConfig = {
   state?: unknown
   dispatch?: Dispatch
   extra?: unknown
+  rejectValue?: unknown
 }
 
 type GetState<ThunkApiConfig> = ThunkApiConfig extends {
@@ -84,6 +102,11 @@ type GetThunkAPI<ThunkApiConfig> = BaseThunkAPI<
   GetExtra<ThunkApiConfig>,
   GetDispatch<ThunkApiConfig>
 >
+type GetRejectValue<ThunkApiConfig> = ThunkApiConfig extends {
+  rejectValue: infer RejectValue
+}
+  ? RejectValue
+  : undefined
 
 /**
  *
@@ -101,8 +124,14 @@ export function createAsyncThunk<
   payloadCreator: (
     arg: ThunkArg,
     thunkAPI: GetThunkAPI<ThunkApiConfig>
-  ) => Promise<Returned> | Returned
+  ) =>
+    | Promise<Returned>
+    | Returned
+    | Promise<RejectWithValue<GetRejectValue<ThunkApiConfig>>>
+    | RejectWithValue<GetRejectValue<ThunkApiConfig>>
 ) {
+  type RejectedValue = GetRejectValue<ThunkApiConfig>
+
   const fulfilled = createAction(
     type + '/fulfilled',
     (result: Returned, requestId: string, arg: ThunkArg) => {
@@ -125,10 +154,15 @@ export function createAsyncThunk<
 
   const rejected = createAction(
     type + '/rejected',
-    (error: Error, requestId: string, arg: ThunkArg) => {
+    (
+      error: Error | null,
+      requestId: string,
+      arg: ThunkArg,
+      payload?: RejectedValue
+    ) => {
       const aborted = error && error.name === 'AbortError'
       return {
-        payload: undefined,
+        payload,
         error: miniSerializeError(error),
         meta: {
           arg,
@@ -175,7 +209,12 @@ export function createAsyncThunk<
                 requestId,
                 signal: abortController.signal
               })
-            ).then(result => fulfilled(result, requestId, arg))
+            ).then(result => {
+              if (isRejectWithValue(result)) {
+                return rejected(null, requestId, arg, result.value)
+              }
+              return fulfilled(result, requestId, arg)
+            })
           ])
         } catch (err) {
           finalAction = rejected(err, requestId, arg)
@@ -198,6 +237,7 @@ export function createAsyncThunk<
     fulfilled
   })
 }
+createAsyncThunk.rejectWithValue = rejectWithValue
 
 /**
  * @alpha

type-tests/files/createAsyncThunk.typetest.ts

@@ -1,6 +1,5 @@
 import { createAsyncThunk, Dispatch, createReducer, AnyAction } from 'src'
 import { ThunkDispatch } from 'redux-thunk'
-import { promises } from 'fs'
 import { unwrapResult } from 'src/createAsyncThunk'
 
 function expectType<T>(t: T) {
@@ -97,4 +96,30 @@ const defaultDispatch = (() => {}) as ThunkDispatch<{}, any, AnyAction>
   correctDispatch(fetchBooksTAC(1))
   // typings:expect-error
   defaultDispatch(fetchBooksTAC(1))
-})()
+})()(
+  /**
+   * returning a rejected action from the promise creator is possible
+   */
+  async () => {
+    type ReturnValue = { data: 'success' }
+    type RejectValue = { data: 'error' }
+
+    const fetchBooksTAC = createAsyncThunk<
+      ReturnValue,
+      number,
+      {
+        rejectValue: RejectValue
+      }
+    >('books/fetch', async arg => {
+      return createAsyncThunk.rejectWithValue<RejectValue>({ data: 'error' })
+    })
+
+    const returned = await defaultDispatch(fetchBooksTAC(1))
+    if (fetchBooksTAC.rejected.match(returned)) {
+      expectType<undefined | RejectValue>(returned.payload)
+      expectType<RejectValue>(returned.payload!)
+    } else {
+      expectType<ReturnValue>(returned.payload)
+    }
+  }
+)()