Include requestId in payload creator args, and use nanoid

Author: markerikson

src/createAsyncThunk.test.ts

@@ -17,12 +17,13 @@ describe('createAsyncThunk', () => {
 
     const result = 42
     const args = 123
-    const requestId = '1'
+    let generatedRequestId = ''
 
     const thunkActionCreator = createAsyncThunk(
       'testType',
-      async (args: number) => {
+      async (args: number, { requestId }) => {
         passedArgs = args
+        generatedRequestId = requestId
         return result
       }
     )
@@ -35,31 +36,32 @@ describe('createAsyncThunk', () => {
 
     expect(dispatch).toHaveBeenNthCalledWith(
       1,
-      thunkActionCreator.pending(args, requestId)
+      thunkActionCreator.pending(args, generatedRequestId)
     )
 
     expect(dispatch).toHaveBeenNthCalledWith(
       2,
-      thunkActionCreator.fulfilled(result, args, requestId)
+      thunkActionCreator.fulfilled(result, args, generatedRequestId)
     )
 
     expect(dispatch).toHaveBeenNthCalledWith(
       3,
-      thunkActionCreator.finished(args, requestId)
+      thunkActionCreator.finished(args, generatedRequestId)
     )
   })
 
   it('accepts arguments and dispatches the actions on reject', async () => {
     const dispatch = jest.fn()
 
     const args = 123
-    const requestId = '1'
+    let generatedRequestId = ''
 
     const error = new Error('Panic!')
 
     const thunkActionCreator = createAsyncThunk(
       'testType',
-      async (args: number) => {
+      async (args: number, { requestId }) => {
+        generatedRequestId = requestId
         throw error
       }
     )
@@ -70,17 +72,17 @@ describe('createAsyncThunk', () => {
 
     expect(dispatch).toHaveBeenNthCalledWith(
       1,
-      thunkActionCreator.pending(args, requestId)
+      thunkActionCreator.pending(args, generatedRequestId)
     )
 
     expect(dispatch).toHaveBeenNthCalledWith(
       2,
-      thunkActionCreator.rejected(error, args, requestId)
+      thunkActionCreator.rejected(error, args, generatedRequestId)
     )
 
     expect(dispatch).toHaveBeenNthCalledWith(
       3,
-      thunkActionCreator.finished(args, requestId)
+      thunkActionCreator.finished(args, generatedRequestId)
     )
   })
 })

src/createAsyncThunk.ts

@@ -1,10 +1,12 @@
 import { Dispatch } from 'redux'
+import nanoid from 'nanoid'
 import { createAction } from './createAction'
 
 type AsyncThunksArgs<S, E, D extends Dispatch = Dispatch> = {
   dispatch: D
   getState: S
   extra: E
+  requestId: string
 }
 
 /**
@@ -40,8 +42,6 @@ export function createAsyncThunk<
     }
   )
 
-  let requestIdCounter = 0
-
   const pending = createAction(
     type + '/pending',
     (args: ActionParams, requestId: string) => {
@@ -79,16 +79,16 @@ export function createAsyncThunk<
       getState: TA['getState'],
       extra: TA['extra']
     ) => {
-      requestIdCounter++
-      const requestId = `${requestIdCounter}`
+      const requestId = nanoid()
 
       try {
         dispatch(pending(args, requestId))
         // TODO Also ugly types
         const result = (await payloadCreator(args, {
           dispatch,
           getState,
-          extra
+          extra,
+          requestId
         } as TA)) as Returned
 
         // TODO How do we avoid errors in here from hitting the catch clause?