payloadCreator arg argument => asyncThunk arg type (#502)

* payloadCreator arg argument => asyncThunk arg type

* allow `|void` typing for optional argument, handle `|undefined` for strictNullChecks: false

* fix tests

* extract types, export `AsyncThunkAction` type

Author: phryneas

etc/redux-toolkit.api.md

@@ -59,6 +59,11 @@ export interface ActionReducerMapBuilder<State> {
 // @public @deprecated
 export type Actions<T extends keyof any = string> = Record<T, Action>;
 
+// @public
+export type AsyncThunkAction<Returned, ThunkArg, ThunkApiConfig extends AsyncThunkConfig> = (dispatch: GetDispatch<ThunkApiConfig>, getState: () => GetState<ThunkApiConfig>, extra: GetExtra<ThunkApiConfig>) => Promise<AsyncThunkReturnValue<ThunkArg, Returned, GetRejectValue<ThunkApiConfig>>> & {
+    abort(reason?: string): void;
+};
+
 // @public
 export type AsyncThunkPayloadCreator<Returned, ThunkArg = void, ThunkApiConfig extends AsyncThunkConfig = {}> = (arg: ThunkArg, thunkAPI: GetThunkAPI<ThunkApiConfig>) => AsyncThunkPayloadCreatorReturnValue<Returned, ThunkApiConfig>;
 
@@ -111,16 +116,7 @@ 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>;
 
 // @public (undocumented)
-export function createAsyncThunk<Returned, ThunkArg = void, ThunkApiConfig extends AsyncThunkConfig = {}>(type: string, payloadCreator: AsyncThunkPayloadCreator<Returned, ThunkArg, ThunkApiConfig>): ((arg: ThunkArg) => (dispatch: GetDispatch<ThunkApiConfig>, getState: () => GetState<ThunkApiConfig>, extra: GetExtra<ThunkApiConfig>) => Promise<PayloadAction<Returned, string, {
-    arg: ThunkArg;
-    requestId: string;
-}, never> | PayloadAction<GetRejectValue<ThunkApiConfig> | undefined, string, {
-    arg: ThunkArg;
-    requestId: string;
-    aborted: boolean;
-}, SerializedError>> & {
-    abort: (reason?: string | undefined) => void;
-}) & {
+export function createAsyncThunk<Returned, ThunkArg = void, ThunkApiConfig extends AsyncThunkConfig = {}>(type: string, payloadCreator: AsyncThunkPayloadCreator<Returned, ThunkArg, ThunkApiConfig>): IsAny<ThunkArg, (arg: ThunkArg) => AsyncThunkAction<Returned, ThunkArg, ThunkApiConfig>, unknown extends ThunkArg ? (arg: ThunkArg) => AsyncThunkAction<Returned, ThunkArg, ThunkApiConfig> : [ThunkArg] extends [void] | [undefined] ? () => AsyncThunkAction<Returned, ThunkArg, ThunkApiConfig> : [void] extends [ThunkArg] ? (arg?: ThunkArg | undefined) => AsyncThunkAction<Returned, ThunkArg, ThunkApiConfig> : [undefined] extends [ThunkArg] ? (arg?: ThunkArg | undefined) => AsyncThunkAction<Returned, ThunkArg, ThunkApiConfig> : (arg: ThunkArg) => AsyncThunkAction<Returned, ThunkArg, ThunkApiConfig>> & {
     pending: ActionCreatorWithPreparedPayload<[string, ThunkArg], undefined, string, never, {
         arg: ThunkArg;
         requestId: string;

src/createAsyncThunk.ts

@@ -5,7 +5,7 @@ import {
   ActionCreatorWithPreparedPayload
 } from './createAction'
 import { ThunkDispatch } from 'redux-thunk'
-import { FallbackIfUnknown } from './tsHelpers'
+import { FallbackIfUnknown, IsAny } from './tsHelpers'
 import { nanoid } from './nanoid'
 
 // @ts-ignore we need the import of these types due to a bundling issue.
@@ -130,6 +130,64 @@ export type AsyncThunkPayloadCreator<
   thunkAPI: GetThunkAPI<ThunkApiConfig>
 ) => AsyncThunkPayloadCreatorReturnValue<Returned, ThunkApiConfig>
 
+type AsyncThunkReturnValue<ThunkArg, FulfilledValue, RejectedValue> =
+  | PayloadAction<FulfilledValue, string, { arg: ThunkArg; requestId: string }>
+  | PayloadAction<
+      undefined | RejectedValue,
+      string,
+      { arg: ThunkArg; requestId: string; aborted: boolean },
+      SerializedError
+    >
+/**
+ * A ThunkAction created by `createAsyncThunk`.
+ * Dispatching it returns a Promise for either a
+ * fulfilled or rejected action.
+ * Also, the returned value contains a `abort()` method
+ * that allows the asyncAction to be cancelled from the outside.
+ *
+ * @public
+ */
+export type AsyncThunkAction<
+  Returned,
+  ThunkArg,
+  ThunkApiConfig extends AsyncThunkConfig
+> = (
+  dispatch: GetDispatch<ThunkApiConfig>,
+  getState: () => GetState<ThunkApiConfig>,
+  extra: GetExtra<ThunkApiConfig>
+) => Promise<
+  AsyncThunkReturnValue<ThunkArg, Returned, GetRejectValue<ThunkApiConfig>>
+> & {
+  abort(reason?: string): void
+}
+
+type AsyncThunkActionCreator<
+  Returned,
+  ThunkArg,
+  ThunkApiConfig extends AsyncThunkConfig
+> = IsAny<
+  ThunkArg,
+  // any handling
+  (arg: ThunkArg) => AsyncThunkAction<Returned, ThunkArg, ThunkApiConfig>,
+  // unknown handling
+  unknown extends ThunkArg
+    ? (arg: ThunkArg) => AsyncThunkAction<Returned, ThunkArg, ThunkApiConfig> // argument not specified or specified as void or undefined
+    : [ThunkArg] extends [void] | [undefined]
+    ? () => AsyncThunkAction<Returned, ThunkArg, ThunkApiConfig> // argument contains void
+    : [void] extends [ThunkArg] // make optional
+    ? (arg?: ThunkArg) => AsyncThunkAction<Returned, ThunkArg, ThunkApiConfig> // argument contains undefined
+    : [undefined] extends [ThunkArg]
+    ? WithStrictNullChecks<
+        // with strict nullChecks: make optional
+        (
+          arg?: ThunkArg
+        ) => AsyncThunkAction<Returned, ThunkArg, ThunkApiConfig>,
+        // without strict null checks this will match everything, so don't make it optional
+        (arg: ThunkArg) => AsyncThunkAction<Returned, ThunkArg, ThunkApiConfig>
+      > // default case: normal argument
+    : (arg: ThunkArg) => AsyncThunkAction<Returned, ThunkArg, ThunkApiConfig>
+>
+
 /**
  *
  * @param type
@@ -216,12 +274,10 @@ If you want to use the AbortController to react to \`abort\` events, please cons
           }
         }
 
-  function actionCreator(arg: ThunkArg) {
-    return (
-      dispatch: GetDispatch<ThunkApiConfig>,
-      getState: () => GetState<ThunkApiConfig>,
-      extra: GetExtra<ThunkApiConfig>
-    ) => {
+  function actionCreator(
+    arg: ThunkArg
+  ): AsyncThunkAction<Returned, ThunkArg, ThunkApiConfig> {
+    return (dispatch, getState, extra) => {
       const requestId = nanoid()
 
       const abortController = new AC()
@@ -277,11 +333,18 @@ If you want to use the AbortController to react to \`abort\` events, please cons
     }
   }
 
-  return Object.assign(actionCreator, {
-    pending,
-    rejected,
-    fulfilled
-  })
+  return Object.assign(
+    actionCreator as AsyncThunkActionCreator<
+      Returned,
+      ThunkArg,
+      ThunkApiConfig
+    >,
+    {
+      pending,
+      rejected,
+      fulfilled
+    }
+  )
 }
 
 type ActionTypesWithOptionalErrorAction =
@@ -304,3 +367,7 @@ export function unwrapResult<R extends ActionTypesWithOptionalErrorAction>(
   }
   return (returned as any).payload
 }
+
+type WithStrictNullChecks<True, False> = undefined extends boolean
+  ? False
+  : True

src/index.ts

@@ -96,6 +96,7 @@ export {
 } from './entities/models'
 
 export {
+  AsyncThunkAction,
   AsyncThunkPayloadCreatorReturnValue,
   AsyncThunkPayloadCreator,
   createAsyncThunk,

type-tests/files/createAsyncThunk.typetest.ts

@@ -3,7 +3,7 @@ import { ThunkDispatch } from 'redux-thunk'
 import { unwrapResult, SerializedError } from 'src/createAsyncThunk'
 
 import apiRequest, { AxiosError } from 'axios'
-import { IsAny } from 'src/tsHelpers'
+import { IsAny, IsUnknown } from 'src/tsHelpers'
 
 function expectType<T>(t: T) {
   return t
@@ -181,3 +181,164 @@ const defaultDispatch = (() => {}) as ThunkDispatch<{}, any, AnyAction>
     }
   })
 }
+
+/**
+ * payloadCreator first argument type has impact on asyncThunk argument
+ */
+{
+  // no argument: asyncThunk has no argument
+  {
+    const asyncThunk = createAsyncThunk('test', () => 0)
+    expectType<() => any>(asyncThunk)
+    // typings:expect-error cannot be called with an argument
+    asyncThunk(0 as any)
+  }
+
+  // one argument, specified as undefined: asyncThunk has no argument
+  {
+    const asyncThunk = createAsyncThunk('test', (arg: undefined) => 0)
+    expectType<() => any>(asyncThunk)
+    // typings:expect-error cannot be called with an argument
+    asyncThunk(0 as any)
+  }
+
+  // one argument, specified as void: asyncThunk has no argument
+  {
+    const asyncThunk = createAsyncThunk('test', (arg: void) => 0)
+    expectType<() => any>(asyncThunk)
+    // typings:expect-error cannot be called with an argument
+    asyncThunk(0 as any)
+  }
+
+  // one argument, specified as optional number: asyncThunk has optional number argument
+  // this test will fail with strictNullChecks: false, that is to be expected
+  // in that case, we have to forbid this behaviour or it will make arguments optional everywhere
+  {
+    const asyncThunk = createAsyncThunk('test', (arg?: number) => 0)
+    expectType<(arg?: number) => any>(asyncThunk)
+    asyncThunk()
+    asyncThunk(5)
+    // typings:expect-error
+    asyncThunk('string')
+  }
+
+  // one argument, specified as number|undefined: asyncThunk has optional number argument
+  // this test will fail with strictNullChecks: false, that is to be expected
+  // in that case, we have to forbid this behaviour or it will make arguments optional everywhere
+  {
+    const asyncThunk = createAsyncThunk('test', (arg: number | undefined) => 0)
+    expectType<(arg?: number) => any>(asyncThunk)
+    asyncThunk()
+    asyncThunk(5)
+    // typings:expect-error
+    asyncThunk('string')
+  }
+
+  // one argument, specified as number|void: asyncThunk has optional number argument
+  {
+    const asyncThunk = createAsyncThunk('test', (arg: number | void) => 0)
+    expectType<(arg?: number) => any>(asyncThunk)
+    asyncThunk()
+    asyncThunk(5)
+    // typings:expect-error
+    asyncThunk('string')
+  }
+
+  // one argument, specified as any: asyncThunk has required any argument
+  {
+    const asyncThunk = createAsyncThunk('test', (arg: any) => 0)
+    expectType<IsAny<Parameters<typeof asyncThunk>[0], true, false>>(true)
+    asyncThunk(5)
+    // typings:expect-error
+    asyncThunk()
+  }
+
+  // one argument, specified as unknown: asyncThunk has required unknown argument
+  {
+    const asyncThunk = createAsyncThunk('test', (arg: unknown) => 0)
+    expectType<IsUnknown<Parameters<typeof asyncThunk>[0], true, false>>(true)
+    asyncThunk(5)
+    // typings:expect-error
+    asyncThunk()
+  }
+
+  // one argument, specified as number: asyncThunk has required number argument
+  {
+    const asyncThunk = createAsyncThunk('test', (arg: number) => 0)
+    expectType<(arg: number) => any>(asyncThunk)
+    asyncThunk(5)
+    // typings:expect-error
+    asyncThunk()
+  }
+
+  // two arguments, first specified as undefined: asyncThunk has no argument
+  {
+    const asyncThunk = createAsyncThunk('test', (arg: undefined, thunkApi) => 0)
+    expectType<() => any>(asyncThunk)
+    // typings:expect-error cannot be called with an argument
+    asyncThunk(0 as any)
+  }
+
+  // two arguments, first specified as void: asyncThunk has no argument
+  {
+    const asyncThunk = createAsyncThunk('test', (arg: void, thunkApi) => 0)
+    expectType<() => any>(asyncThunk)
+    // typings:expect-error cannot be called with an argument
+    asyncThunk(0 as any)
+  }
+
+  // two arguments, first specified as number|undefined: asyncThunk has optional number argument
+  // this test will fail with strictNullChecks: false, that is to be expected
+  // in that case, we have to forbid this behaviour or it will make arguments optional everywhere
+  {
+    const asyncThunk = createAsyncThunk(
+      'test',
+      (arg: number | undefined, thunkApi) => 0
+    )
+    expectType<(arg?: number) => any>(asyncThunk)
+    asyncThunk()
+    asyncThunk(5)
+    // typings:expect-error
+    asyncThunk('string')
+  }
+
+  // two arguments, first specified as number|void: asyncThunk has optional number argument
+  {
+    const asyncThunk = createAsyncThunk(
+      'test',
+      (arg: number | void, thunkApi) => 0
+    )
+    expectType<(arg?: number) => any>(asyncThunk)
+    asyncThunk()
+    asyncThunk(5)
+    // typings:expect-error
+    asyncThunk('string')
+  }
+
+  // two arguments, first specified as any: asyncThunk has required any argument
+  {
+    const asyncThunk = createAsyncThunk('test', (arg: any, thunkApi) => 0)
+    expectType<IsAny<Parameters<typeof asyncThunk>[0], true, false>>(true)
+    asyncThunk(5)
+    // typings:expect-error
+    asyncThunk()
+  }
+
+  // two arguments, first specified as unknown: asyncThunk has required unknown argument
+  {
+    const asyncThunk = createAsyncThunk('test', (arg: unknown, thunkApi) => 0)
+    expectType<IsUnknown<Parameters<typeof asyncThunk>[0], true, false>>(true)
+    asyncThunk(5)
+    // typings:expect-error
+    asyncThunk()
+  }
+
+  // two arguments, first specified as number: asyncThunk has required number argument
+  {
+    const asyncThunk = createAsyncThunk('test', (arg: number, thunkApi) => 0)
+    expectType<(arg: number) => any>(asyncThunk)
+    asyncThunk(5)
+    // typings:expect-error
+    asyncThunk()
+  }
+}