Add createAsyncThunk

Author: markerikson

src/createAsyncThunk.test.ts

@@ -0,0 +1,82 @@
+import { createAsyncThunk } from './createAsyncThunk'
+
+describe('createAsyncThunk', () => {
+  it('creates the action types', () => {
+    const thunkActionCreator = createAsyncThunk('testType', async () => 42)
+
+    expect(thunkActionCreator.fulfilled.type).toBe('testType')
+    expect(thunkActionCreator.pending.type).toBe('testType/pending')
+    expect(thunkActionCreator.finished.type).toBe('testType/finished')
+    expect(thunkActionCreator.rejected.type).toBe('testType/rejected')
+  })
+
+  it('accepts arguments and dispatches the actions on resolve', async () => {
+    const dispatch = jest.fn()
+
+    let passedArgs: any
+
+    const result = 42
+    const args = 123
+
+    const thunkActionCreator = createAsyncThunk(
+      'testType',
+      async ({ args }) => {
+        passedArgs = args
+        return result
+      }
+    )
+
+    const thunkFunction = thunkActionCreator(args)
+
+    await thunkFunction(dispatch, undefined, undefined)
+
+    expect(passedArgs).toBe(args)
+
+    expect(dispatch).toHaveBeenNthCalledWith(
+      1,
+      thunkActionCreator.pending({ args })
+    )
+
+    expect(dispatch).toHaveBeenNthCalledWith(
+      2,
+      thunkActionCreator.fulfilled({ args, result })
+    )
+
+    expect(dispatch).toHaveBeenNthCalledWith(
+      3,
+      thunkActionCreator.finished({ args })
+    )
+  })
+
+  it('accepts arguments and dispatches the actions on reject', async () => {
+    const dispatch = jest.fn()
+
+    let passedArgs: any
+    const args = 123
+
+    const error = new Error('Panic!')
+
+    const thunkActionCreator = createAsyncThunk('testType', async () => {
+      throw error
+    })
+
+    const thunkFunction = thunkActionCreator(args)
+
+    await thunkFunction(dispatch, undefined, undefined)
+
+    expect(dispatch).toHaveBeenNthCalledWith(
+      1,
+      thunkActionCreator.pending({ args })
+    )
+
+    expect(dispatch).toHaveBeenNthCalledWith(
+      2,
+      thunkActionCreator.rejected({ args, error })
+    )
+
+    expect(dispatch).toHaveBeenNthCalledWith(
+      3,
+      thunkActionCreator.finished({ args })
+    )
+  })
+})

src/createAsyncThunk.ts

@@ -0,0 +1,87 @@
+import { Dispatch } from 'redux'
+import { ActionCreatorWithPayload, createAction } from './createAction'
+
+export type Await<T> = T extends {
+  then(onfulfilled?: (value: infer U) => unknown): unknown
+}
+  ? U
+  : T
+
+export interface AsyncThunkParams<
+  A,
+  D extends Dispatch,
+  S extends unknown,
+  E extends unknown
+> {
+  args: A
+  dispatch: D
+  getState: () => S
+  extra: E
+}
+
+export type AsyncActionCreator<
+  A,
+  D extends Dispatch,
+  S extends unknown,
+  E extends unknown
+> = (params: AsyncThunkParams<A, D, S, E>) => any
+
+export function createAsyncThunk<
+  ActionType extends string,
+  PayloadCreator extends AsyncActionCreator<
+    unknown,
+    Dispatch,
+    unknown,
+    undefined
+  >
+>(type: ActionType, payloadCreator: PayloadCreator) {
+  type ActionParams = Parameters<PayloadCreator>[0]['args']
+
+  const fulfilled = createAction(type) as ActionCreatorWithPayload<
+    { args: ActionParams; result: Await<ReturnType<PayloadCreator>> },
+    ActionType
+  >
+
+  const pending = createAction(type + '/pending') as ActionCreatorWithPayload<
+    { args: ActionParams },
+    string
+  >
+
+  const finished = createAction(type + '/finished') as ActionCreatorWithPayload<
+    { args: ActionParams },
+    string
+  >
+
+  const rejected = createAction(type + '/rejected') as ActionCreatorWithPayload<
+    { args: ActionParams; error: Error },
+    string
+  >
+
+  function actionCreator(args?: ActionParams) {
+    return async (dispatch: any, getState: any, extra: any) => {
+      try {
+        dispatch(pending({ args }))
+        const result: Await<ReturnType<PayloadCreator>> = await payloadCreator({
+          args,
+          dispatch,
+          getState,
+          extra
+        })
+        // TODO How do we avoid errors in here from hitting the catch clause?
+        return dispatch(fulfilled({ args, result }))
+      } catch (err) {
+        // TODO Errors aren't serializable
+        dispatch(rejected({ args, error: err }))
+      } finally {
+        dispatch(finished({ args }))
+      }
+    }
+  }
+
+  actionCreator.pending = pending
+  actionCreator.rejected = rejected
+  actionCreator.fulfilled = fulfilled
+  actionCreator.finished = finished
+
+  return actionCreator
+}