Merge pull request #4519 from EskiMojo14/mw-action-unknown

fixes undefined

Author: markerikson

src/types/middleware.ts

@@ -20,11 +20,11 @@ export interface MiddlewareAPI<D extends Dispatch = Dispatch, S = any> {
  *   installed.
  */
 export interface Middleware<
-  _DispatchExt = {}, // TODO: remove unused component (breaking change)
+  _DispatchExt = {}, // TODO: see if this can be used in type definition somehow (can't be removed, as is used to get final dispatch type)
   S = any,
   D extends Dispatch = Dispatch
 > {
   (api: MiddlewareAPI<D, S>): (
-    next: D
-  ) => (action: D extends Dispatch<infer A> ? A : never) => any
+    next: (action: unknown) => unknown
+  ) => (action: unknown) => unknown
 }

test/applyMiddleware.spec.ts

@@ -28,10 +28,10 @@ describe('applyMiddleware', () => {
   })
 
   it('wraps dispatch method with middleware once', () => {
-    function test(spyOnMethods: any) {
-      return (methods: any) => {
+    function test(spyOnMethods: any): Middleware {
+      return methods => {
         spyOnMethods(methods)
-        return (next: Dispatch) => (action: Action) => next(action)
+        return next => action => next(action)
       }
     }
 
@@ -53,8 +53,8 @@ describe('applyMiddleware', () => {
   })
 
   it('passes recursive dispatches through the middleware chain', () => {
-    function test(spyOnMethods: any) {
-      return () => (next: Dispatch) => (action: Action) => {
+    function test(spyOnMethods: any): Middleware {
+      return () => next => action => {
         spyOnMethods(action)
         return next(action)
       }
@@ -146,8 +146,7 @@ describe('applyMiddleware', () => {
     }
 
     function dummyMiddleware({ dispatch }: MiddlewareAPI) {
-      return (_next: Dispatch) => (action: Action) =>
-        dispatch(action, testCallArgs)
+      return (_next: unknown) => (action: any) => dispatch(action, testCallArgs)
     }
 
     const store = createStore(

test/helpers/middleware.ts

@@ -1,13 +1,9 @@
-import { MiddlewareAPI, Dispatch, AnyAction } from 'redux'
+import { Dispatch, Middleware } from 'redux'
 
-type ThunkAction<T extends any = any> = T extends AnyAction
-  ? AnyAction
-  : T extends Function
-  ? T
-  : never
-
-export function thunk({ dispatch, getState }: MiddlewareAPI) {
-  return (next: Dispatch) =>
-    <_>(action: ThunkAction) =>
-      typeof action === 'function' ? action(dispatch, getState) : next(action)
-}
+export const thunk: Middleware<{
+  <R>(thunk: (dispatch: Dispatch, getState: () => any) => R): R
+}> =
+  ({ dispatch, getState }) =>
+  next =>
+  action =>
+    typeof action === 'function' ? action(dispatch, getState) : next(action)

test/typescript/middleware.ts

@@ -15,8 +15,8 @@ import {
  */
 function logger() {
   const loggerMiddleware: Middleware =
-    ({ getState }: MiddlewareAPI) =>
-    (next: Dispatch) =>
+    ({ getState }) =>
+    next =>
     action => {
       console.log('will dispatch', action)
 
@@ -41,9 +41,9 @@ type PromiseDispatch = <T extends Action>(promise: Promise<T>) => Promise<T>
 
 function promise() {
   const promiseMiddleware: Middleware<PromiseDispatch> =
-    ({ dispatch }: MiddlewareAPI) =>
+    ({ dispatch }) =>
     next =>
-    <T extends Action>(action: AnyAction | Promise<T>) => {
+    action => {
       if (action instanceof Promise) {
         action.then(dispatch)
         return action
@@ -72,13 +72,10 @@ function thunk<S, DispatchExt>() {
     ThunkDispatch<S, DispatchExt>,
     S,
     Dispatch & ThunkDispatch<S>
-  > =
-    api =>
-    (next: Dispatch) =>
-    <R>(action: AnyAction | Thunk<R, any>) =>
-      typeof action === 'function'
-        ? action(api.dispatch, api.getState)
-        : next(action)
+  > = api => next => action =>
+    typeof action === 'function'
+      ? action(api.dispatch, api.getState)
+      : next(action)
 
   return thunkMiddleware
 }
@@ -89,14 +86,13 @@ function thunk<S, DispatchExt>() {
 function customState() {
   type State = { field: 'string' }
 
-  const customMiddleware: Middleware<{}, State> =
-    api => (next: Dispatch) => action => {
-      api.getState().field
-      // @ts-expect-error
-      api.getState().wrongField
+  const customMiddleware: Middleware<{}, State> = api => next => action => {
+    api.getState().field
+    // @ts-expect-error
+    api.getState().wrongField
 
-      return next(action)
-    }
+    return next(action)
+  }
 
   return customMiddleware
 }