feat: 🎸 add cancel action support

✅ Closes: #3

Author: xcarpentier

README.md

@@ -8,18 +8,23 @@
 
 # react-redux-dispatch-async
 
-👉 REDUX _middleware_ waiting async _actions_ with **SUFFIXES** 👈
+👉 REDUX _middleware_ & **HOOK** 🎉 waiting async _actions_ with **SUFFIXES** 👈
 
 ```
-                                     +------------------+
-                              +----->+ ACTION_SUCCEEDED +
-                              |      +------------------+
-      +------------------+    |
-      + ACTION_REQUESTED +----+
-      +------------------+    |
+
+      +------------------+
+      | ACTION_REQUESTED |----+
+      +------------------+    |      +------------------+
+                              +----->| ACTION_SUCCEEDED |
                               |      +------------------+
-                              +----->+  ACTION_FAILED   +
-                                     +------------------+
+                              |
+                              |      +--------------------+
+                              +----->|   ACTION_FAILED    |
+                              |      +--------------------+
+                              |
+                              |      +--------------------+
+                              +----->|  ACTION_CANCELED  |
+                                     +--------------------+
 ```
 
 ## Install
@@ -47,6 +52,8 @@ export default function MyUserInterface({ id }: { id: string }) {
       return <User {...result} />
     case 'timeout':
       return <Text>{'timeout ¯\\_(ツ)_//¯'}</Text>
+    case 'canceled':
+      return <Text>{'canceled ¯\\_(ツ)_//¯'}</Text>
     default:
       return null
   }
@@ -69,6 +76,7 @@ const store = createStore(
       request: 'REQUEST', // 👈 define your own async suffixes
       success: 'SUCCESS',
       failure: 'FAILURE',
+      cancel: 'CANCEL', // optional
     }),
   ),
 )
@@ -79,6 +87,7 @@ const store = createStore(
 - `[...]_REQUESTED`
 - `[...]_SUCCEEDED`
 - `[...]_FAILED`
+- `[...]_CANCELED`
 
 ## Two functions
 
@@ -89,6 +98,7 @@ dispatchAsyncMiddleware: (c?: {
   request: string
   success: string
   failure: string
+  cancel?: string
 }) => redux.Middleware
 ```
 

src/DispatchAsyncMiddleware.ts

@@ -1,13 +1,21 @@
 import { Action, Middleware } from 'redux'
 import { listeners } from './ActionListener'
 
-export interface ActionSuffix {
+export interface NormalSuffix {
   request: string
   success: string
   failure: string
-  cancel?: string
 }
 
+export interface CancelableSuffix {
+  request: string
+  success: string
+  failure: string
+  cancel: string
+}
+
+export type ActionSuffix = NormalSuffix | CancelableSuffix
+
 export const ConfigMiddleware: {
   suffixes: ActionSuffix
   initialized: boolean
@@ -17,14 +25,15 @@ export const ConfigMiddleware: {
     request: 'REQUESTED',
     success: 'SUCCEEDED',
     failure: 'FAILED',
-    cancel: undefined,
+    cancel: 'CANCELED',
   },
 }
 
 const isAsyncAction = (config: ActionSuffix, action: Action) =>
   action.type.endsWith(config.request) ||
   action.type.endsWith(config.success) ||
-  action.type.endsWith(config.failure)
+  action.type.endsWith(config.failure) ||
+  action.type.endsWith((config as CancelableSuffix).cancel)
 
 export const createDispatchAsyncMiddleware: (
   config?: ActionSuffix,

src/dispatchAsync.ts

@@ -1,6 +1,6 @@
 import { Action } from 'redux'
 import { addActionListener } from './ActionListener'
-import { ConfigMiddleware } from './DispatchAsyncMiddleware'
+import { CancelableSuffix, ConfigMiddleware } from './DispatchAsyncMiddleware'
 
 interface DispatchAsyncResultSuccess<T = any> {
   success: true
@@ -10,6 +10,7 @@ interface DispatchAsyncResultSuccess<T = any> {
 interface DispatchAsyncResultError {
   success: false
   error: Error
+  canceled?: true
 }
 
 export type DispatchAsyncResult<T = any> =
@@ -45,6 +46,18 @@ export function dispatchAsync<T = any>(
             : new Error(`Action failure: ${actionNameBase}`)
         resolve({ success: false, error })
         unsubscribe()
+      } else if (
+        resultAction.type ===
+        `${actionNameBase}_${
+          (ConfigMiddleware.suffixes as CancelableSuffix).cancel
+        }`
+      ) {
+        resolve({
+          success: false,
+          error: new Error('canceled'),
+          canceled: true,
+        })
+        unsubscribe()
       }
     })
     dispatch(action)

src/useDispatchAsync.test.tsx

@@ -33,6 +33,16 @@ const dumbRequest = () => ({
   payload: undefined,
 })
 
+const cancelableActionRequest = () => ({
+  type: 'CANCELABLE_ACTION_REQUESTED',
+  payload: undefined,
+})
+
+const cancelableActionCancel = () => ({
+  type: 'CANCELABLE_ACTION_CANCELED',
+  payload: undefined,
+})
+
 const ReduxProvider = ({
   children,
   store,
@@ -65,6 +75,10 @@ sagaMiddleware.run(function*() {
       yield delay(1000)
       yield put(loadUsersFailure(new Error('load user failed')))
     }),
+    takeEvery('CANCELABLE_ACTION_REQUESTED', function*() {
+      yield delay(1000)
+      yield put(cancelableActionCancel())
+    }),
   ])
 })
 
@@ -111,3 +125,14 @@ test('should return timeout status', async () => {
   await wait(() => result.current.status !== 'loading')
   expect(result.current.status).toBe('timeout')
 })
+
+test('should return cancel status', async () => {
+  const { result, wait } = renderHook(
+    () =>
+      useDispatchAsync<{ id: string; name: string }>(cancelableActionRequest),
+    { wrapper },
+  )
+  expect(result.current.status).toBe('loading')
+  await wait(() => result.current.status !== 'loading')
+  expect(result.current.status).toBe('canceled')
+})

src/useDispatchAsync.ts

@@ -17,6 +17,10 @@ interface ResultError {
   error: Error
 }
 
+interface ResultCancel {
+  status: 'canceled'
+}
+
 interface ResultTimeout {
   status: 'timeout'
 }
@@ -30,6 +34,7 @@ export type UseDispatchAsync<R = unknown> =
   | ResultSuccess<R>
   | ResultError
   | ResultTimeout
+  | ResultCancel
   | ResultUnknown
 
 export type Status = Pick<UseDispatchAsync, 'status'>['status']
@@ -52,6 +57,7 @@ export function useDispatchAsync<R = any>(
   const [result, setResult] = useState<R | undefined>(undefined)
   const [error, setError] = useState<Error | undefined>(undefined)
   const [isTimeout, setIsTimeout] = useState<boolean>(false)
+  const [isCancel, setIsCancel] = useState<boolean>(false)
 
   // 👉 race condition to get last update
   // https://sebastienlorber.com/handling-api-request-race-conditions-in-react
@@ -73,8 +79,18 @@ export function useDispatchAsync<R = any>(
       .then((res) => {
         // filtering last update promise
         if (currentPromise === lastPromise.current) {
+          // filtering timeout
           if (typeof res !== 'boolean') {
-            res.success ? setResult(res.result) : setError(res.error)
+            // filtering success
+            if (res.success) {
+              setResult(res.result)
+            } else {
+              if (!res.canceled) {
+                setError(res.error)
+              } else {
+                setIsCancel(true)
+              }
+            }
           } else {
             setIsTimeout(true)
           }
@@ -89,13 +105,18 @@ export function useDispatchAsync<R = any>(
   }, deps)
 
   const status: Status = useMemo(() => {
-    if (!result && !error && !isTimeout) {
+    if (!result && !error && !isTimeout && !isCancel) {
       return 'loading'
     }
+
     if (result) {
       return 'success'
     }
 
+    if (isCancel) {
+      return 'canceled'
+    }
+
     if (error) {
       return 'error'
     }
@@ -105,11 +126,12 @@ export function useDispatchAsync<R = any>(
     }
 
     return 'unknown'
-  }, [result, error, isTimeout])
+  }, [result, error, isTimeout, isCancel])
 
   switch (status) {
     case 'loading':
     case 'timeout':
+    case 'canceled':
       return { status }
     case 'success':
       return { result: result!, status }