Initial implementation of listenerMiddleware.withTypes

Author: aryaemami59

packages/toolkit/src/listenerMiddleware/index.ts

@@ -4,72 +4,72 @@ import type { ThunkDispatch } from 'redux-thunk'
 import { createAction } from '../createAction'
 import { nanoid } from '../nanoid'
 
+import { find } from '../utils'
+import {
+  TaskAbortError,
+  listenerCancelled,
+  listenerCompleted,
+  taskCancelled,
+  taskCompleted,
+} from './exceptions'
+import {
+  createDelay,
+  createPause,
+  raceWithSignal,
+  runTask,
+  validateActive,
+} from './task'
 import type {
-  ListenerMiddleware,
-  ListenerMiddlewareInstance,
+  AbortSignalWithReason,
   AddListenerOverloads,
   AnyListenerPredicate,
   CreateListenerMiddlewareOptions,
-  TypedAddListener,
-  TypedCreateListenerEntry,
   FallbackAddListenerOptions,
+  ForkOptions,
+  ForkedTask,
+  ForkedTaskExecutor,
   ListenerEntry,
   ListenerErrorHandler,
-  UnsubscribeListener,
-  TakePattern,
   ListenerErrorInfo,
-  ForkedTaskExecutor,
-  ForkedTask,
-  TypedRemoveListener,
+  ListenerMiddleware,
+  ListenerMiddlewareInstance,
+  TakePattern,
   TaskResult,
-  AbortSignalWithReason,
+  TypedAddListener,
+  TypedCreateListenerEntry,
+  TypedRemoveListener,
+  UnsubscribeListener,
   UnsubscribeListenerOptions,
-  ForkOptions,
 } from './types'
 import {
   abortControllerWithReason,
   addAbortSignalListener,
   assertFunction,
   catchRejection,
 } from './utils'
-import {
-  listenerCancelled,
-  listenerCompleted,
-  TaskAbortError,
-  taskCancelled,
-  taskCompleted,
-} from './exceptions'
-import {
-  runTask,
-  validateActive,
-  createPause,
-  createDelay,
-  raceWithSignal,
-} from './task'
-import { find } from '../utils'
 export { TaskAbortError } from './exceptions'
 export type {
-  ListenerEffect,
-  ListenerMiddleware,
-  ListenerEffectAPI,
-  ListenerMiddlewareInstance,
+  AsyncTaskExecutor,
   CreateListenerMiddlewareOptions,
-  ListenerErrorHandler,
-  TypedStartListening,
-  TypedAddListener,
-  TypedStopListening,
-  TypedRemoveListener,
-  UnsubscribeListener,
-  UnsubscribeListenerOptions,
-  ForkedTaskExecutor,
   ForkedTask,
   ForkedTaskAPI,
-  AsyncTaskExecutor,
+  ForkedTaskExecutor,
+  ListenerEffect,
+  ListenerEffectAPI,
+  ListenerErrorHandler,
+  ListenerMiddleware,
+  ListenerMiddlewareInstance,
   SyncTaskExecutor,
   TaskCancelled,
   TaskRejected,
   TaskResolved,
   TaskResult,
+  TypedAddListener,
+  TypedRemoveListener,
+  TypedStartListening,
+  TypedStopListening,
+  UnsubscribeListener,
+  UnsubscribeListenerOptions,
 } from './types'
 
 //Overly-aggressive byte-shaving
@@ -215,25 +215,27 @@ const getListenerEntryPropsFrom = (options: FallbackAddListenerOptions) => {
 }
 
 /** Accepts the possible options for creating a listener, and returns a formatted listener entry */
-export const createListenerEntry: TypedCreateListenerEntry<unknown> = (
-  options: FallbackAddListenerOptions
-) => {
-  const { type, predicate, effect } = getListenerEntryPropsFrom(options)
-
-  const id = nanoid()
-  const entry: ListenerEntry<unknown> = {
-    id,
-    effect,
-    type,
-    predicate,
-    pending: new Set<AbortController>(),
-    unsubscribe: () => {
-      throw new Error('Unsubscribe not initialized')
-    },
-  }
+export const createListenerEntry: TypedCreateListenerEntry<unknown> =
+  Object.assign(
+    (options: FallbackAddListenerOptions) => {
+      const { type, predicate, effect } = getListenerEntryPropsFrom(options)
+
+      const id = nanoid()
+      const entry: ListenerEntry<unknown> = {
+        id,
+        effect,
+        type,
+        predicate,
+        pending: new Set<AbortController>(),
+        unsubscribe: () => {
+          throw new Error('Unsubscribe not initialized')
+        },
+      }
 
-  return entry
-}
+      return entry
+    },
+    { withTypes: () => createListenerEntry }
+  ) as unknown as TypedCreateListenerEntry<unknown>
 
 const cancelActiveListeners = (
   entry: ListenerEntry<unknown, Dispatch<UnknownAction>>
@@ -302,11 +304,17 @@ const defaultErrorHandler: ListenerErrorHandler = (...args: unknown[]) => {
 /**
  * @public
  */
-export function createListenerMiddleware<
-  S = unknown,
-  D extends Dispatch<Action> = ThunkDispatch<S, unknown, UnknownAction>,
+export const createListenerMiddleware = <
+  StateType = unknown,
+  DispatchType extends Dispatch<Action> = ThunkDispatch<
+    StateType,
+    unknown,
+    UnknownAction
+  >,
   ExtraArgument = unknown
->(middlewareOptions: CreateListenerMiddlewareOptions<ExtraArgument> = {}) {
+>(
+  middlewareOptions: CreateListenerMiddlewareOptions<ExtraArgument> = {}
+) => {
   const listenerMap = new Map<string, ListenerEntry>()
   const { extra, onError = defaultErrorHandler } = middlewareOptions
 
@@ -324,7 +332,7 @@ export function createListenerMiddleware<
     }
   }
 
-  const startListening = (options: FallbackAddListenerOptions) => {
+  const startListening = ((options: FallbackAddListenerOptions) => {
     let entry = find(
       Array.from(listenerMap.values()),
       (existingEntry) => existingEntry.effect === options.effect
@@ -335,7 +343,11 @@ export function createListenerMiddleware<
     }
 
     return insertEntry(entry)
-  }
+  }) as AddListenerOverloads<any>
+
+  Object.assign(startListening, {
+    withTypes: () => startListening,
+  })
 
   const stopListening = (
     options: FallbackAddListenerOptions & UnsubscribeListenerOptions
@@ -365,11 +377,11 @@ export function createListenerMiddleware<
     entry: ListenerEntry<unknown, Dispatch<UnknownAction>>,
     action: unknown,
     api: MiddlewareAPI,
-    getOriginalState: () => S
+    getOriginalState: () => StateType
   ) => {
     const internalTaskController = new AbortController()
     const take = createTakePattern(
-      startListening,
+      startListening as AddListenerOverloads<any>,
       internalTaskController.signal
     )
     const autoJoinPromises: Promise<any>[] = []
@@ -433,15 +445,15 @@ export function createListenerMiddleware<
 
   const clearListenerMiddleware = createClearListenerMiddleware(listenerMap)
 
-  const middleware: ListenerMiddleware<S, D, ExtraArgument> =
+  const middleware: ListenerMiddleware<StateType, DispatchType, ExtraArgument> =
     (api) => (next) => (action) => {
       if (!isAction(action)) {
         // we only want to notify listeners for action objects
         return next(action)
       }
 
       if (addListener.match(action)) {
-        return startListening(action.payload)
+        return startListening(action.payload as any)
       }
 
       if (clearAllListeners.match(action)) {
@@ -454,18 +466,18 @@ export function createListenerMiddleware<
       }
 
       // Need to get this state _before_ the reducer processes the action
-      let originalState: S | typeof INTERNAL_NIL_TOKEN = api.getState()
+      let originalState: StateType | typeof INTERNAL_NIL_TOKEN = api.getState()
 
       // `getOriginalState` can only be called synchronously.
       // @see https://github.com/reduxjs/redux-toolkit/discussions/1648#discussioncomment-1932820
-      const getOriginalState = (): S => {
+      const getOriginalState = (): StateType => {
         if (originalState === INTERNAL_NIL_TOKEN) {
           throw new Error(
             `${alm}: getOriginalState can only be called synchronously`
           )
         }
 
-        return originalState as S
+        return originalState as StateType
       }
 
       let result: unknown
@@ -475,10 +487,10 @@ export function createListenerMiddleware<
         result = next(action)
 
         if (listenerMap.size > 0) {
-          let currentState = api.getState()
+          const currentState = api.getState()
           // Work around ESBuild+TS transpilation issue
           const listenerEntries = Array.from(listenerMap.values())
-          for (let entry of listenerEntries) {
+          for (const entry of listenerEntries) {
             let runListener = false
 
             try {
@@ -511,5 +523,5 @@ export function createListenerMiddleware<
     startListening,
     stopListening,
     clearListeners: clearListenerMiddleware,
-  } as ListenerMiddlewareInstance<S, D, ExtraArgument>
+  } as ListenerMiddlewareInstance<StateType, DispatchType, ExtraArgument>
 }

packages/toolkit/src/listenerMiddleware/tests/listenerMiddleware.test-d.ts

@@ -0,0 +1,95 @@
+import type { Action } from 'redux'
+import type { ThunkAction } from 'redux-thunk'
+import { expectTypeOf } from 'vitest'
+import { createListenerMiddleware } from '..'
+import { configureStore } from '../../configureStore'
+import { createAsyncThunk } from '../../createAsyncThunk'
+import { createSlice } from '../../createSlice'
+
+export interface CounterState {
+  counter: number
+}
+
+const initialState: CounterState = {
+  counter: 0,
+}
+
+export const counterSlice = createSlice({
+  name: 'counter',
+  initialState,
+  reducers: {
+    increment(state) {
+      state.counter++
+    },
+  },
+})
+
+export function fetchCount(amount = 1) {
+  return new Promise<{ data: number }>((resolve) =>
+    setTimeout(() => resolve({ data: amount }), 500)
+  )
+}
+
+export const incrementAsync = createAsyncThunk(
+  'counter/fetchCount',
+  async (amount: number) => {
+    const response = await fetchCount(amount)
+    // The value we return becomes the `fulfilled` action payload
+    return response.data
+  }
+)
+
+const { increment } = counterSlice.actions
+
+const counterStore = configureStore({
+  reducer: counterSlice.reducer,
+})
+
+type AppStore = typeof counterStore
+type AppDispatch = typeof counterStore.dispatch
+type RootState = ReturnType<typeof counterStore.getState>
+type AppThunk<ThunkReturnType = void> = ThunkAction<
+  ThunkReturnType,
+  RootState,
+  unknown,
+  Action
+>
+
+describe('listenerMiddleware.withTypes<RootState, AppDispatch>()', () => {
+  const listenerMiddleware = createListenerMiddleware()
+  let timeout: number | undefined = undefined
+  let done = false
+
+  type ExpectedTakeResultType =
+    | readonly [ReturnType<typeof increment>, CounterState, CounterState]
+    | null
+
+  test('startListening.withTypes', () => {
+    const startAppListening = listenerMiddleware.startListening.withTypes<
+      CounterState,
+      AppDispatch
+    >()
+    startAppListening({
+      predicate: increment.match,
+      effect: async (_, listenerApi) => {
+        const stateBefore = listenerApi.getState()
+
+        let takeResult = await listenerApi.take(increment.match, timeout)
+        const stateCurrent = listenerApi.getState()
+        expect(takeResult).toEqual([increment(), stateCurrent, stateBefore])
+
+        timeout = 1
+        takeResult = await listenerApi.take(increment.match, timeout)
+        expect(takeResult).toBeNull()
+
+        expectTypeOf<
+          typeof takeResult
+        >(takeResult).toEqualTypeOf<ExpectedTakeResultType>()
+
+        done = true
+      },
+    })
+  })
+
+  test('addListener.withTypes', () => {})
+})

packages/toolkit/src/listenerMiddleware/tests/listenerMiddleware.test.ts

@@ -1760,3 +1760,4 @@ describe('createListenerMiddleware', () => {
     })
   })
 })
+