account for new Middleware typing

Author: ben.durrant

packages/toolkit/src/createAction.ts

@@ -286,15 +286,19 @@ export function createAction(type: string, prepareAction?: Function): any {
   return actionCreator
 }
 
+export function isAction(action: unknown): action is Action<unknown> {
+  return isPlainObject(action) && 'type' in action
+}
+
 export function isFSA(action: unknown): action is {
   type: string
   payload?: unknown
   error?: unknown
   meta?: unknown
 } {
   return (
-    isPlainObject(action) &&
-    typeof (action as any).type === 'string' &&
+    isAction(action) &&
+    typeof action.type === 'string' &&
     Object.keys(action).every(isValidKey)
   )
 }

packages/toolkit/src/index.ts

@@ -32,6 +32,8 @@ export {
   // js
   createAction,
   getType,
+  isAction,
+  isFSA as isFluxStandardAction,
 } from './createAction'
 export type {
   // types

packages/toolkit/src/listenerMiddleware/index.ts

@@ -1,6 +1,6 @@
 import type { Dispatch, AnyAction, MiddlewareAPI } from 'redux'
 import type { ThunkDispatch } from 'redux-thunk'
-import { createAction } from '../createAction'
+import { createAction, isAction } from '../createAction'
 import { nanoid } from '../nanoid'
 
 import type {
@@ -426,6 +426,11 @@ export function createListenerMiddleware<
 
   const middleware: ListenerMiddleware<S, D, ExtraArgument> =
     (api) => (next) => (action) => {
+      if (!isAction(action)) {
+        // this means that the listeners can't react to anything that doesn't look like an action (plain object with .type property)
+        // but that matches the typing, so i think that's fine?
+        return next(action)
+      }
       if (addListener.match(action)) {
         return startListening(action.payload)
       }

packages/toolkit/src/query/core/buildMiddleware/index.ts

@@ -1,5 +1,5 @@
 import type { AnyAction, Middleware, ThunkDispatch } from '@reduxjs/toolkit'
-import { createAction } from '@reduxjs/toolkit'
+import { isAction, createAction } from '@reduxjs/toolkit'
 
 import type {
   EndpointDefinitions,
@@ -80,6 +80,9 @@ export function buildMiddleware<
 
     return (next) => {
       return (action) => {
+        if (!isAction(action)) {
+          return next(action)
+        }
         if (!initialized) {
           initialized = true
           // dispatch before any other action

packages/toolkit/src/query/core/buildMiddleware/types.ts

@@ -71,11 +71,13 @@ export type SubMiddlewareBuilder = (
   ThunkDispatch<any, any, AnyAction>
 >
 
-export type ApiMiddlewareInternalHandler<ReturnType = void> = (
+type MwNext = Parameters<ReturnType<Middleware>>[0]
+
+export type ApiMiddlewareInternalHandler<Return = void> = (
   action: AnyAction,
-  mwApi: SubMiddlewareApi & { next: Dispatch<AnyAction> },
+  mwApi: SubMiddlewareApi & { next: MwNext },
   prevState: RootState<EndpointDefinitions, string, string>
-) => ReturnType
+) => Return
 
 export type InternalHandlerBuilder<ReturnType = void> = (
   input: BuildSubMiddlewareInput

packages/toolkit/src/serializableStateInvariantMiddleware.ts

@@ -1,6 +1,7 @@
 import isPlainObject from './isPlainObject'
 import type { Middleware } from 'redux'
 import { getTimeMeasureUtils } from './utils'
+import { isAction } from './createAction'
 
 /**
  * Returns true if the passed value is "plain", i.e. a value that is either
@@ -207,6 +208,10 @@ export function createSerializableStateInvariantMiddleware(
       !disableCache && WeakSet ? new WeakSet() : undefined
 
     return (storeAPI) => (next) => (action) => {
+      if (!isAction(action)) {
+        return next(action)
+      }
+
       const result = next(action)
 
       const measureUtils = getTimeMeasureUtils(
@@ -216,7 +221,10 @@ export function createSerializableStateInvariantMiddleware(
 
       if (
         !ignoreActions &&
-        !(ignoredActions.length && ignoredActions.indexOf(action.type) !== -1)
+        !(
+          ignoredActions.length &&
+          ignoredActions.indexOf(action.type as any) !== -1
+        )
       ) {
         measureUtils.measureTime(() => {
           const foundActionNonSerializableValue = findNonSerializableValue(

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

@@ -3,6 +3,7 @@ import type {
   MiddlewareAPI,
   Dispatch,
   ImmutableStateInvariantMiddlewareOptions,
+  Middleware,
 } from '@reduxjs/toolkit'
 import {
   createImmutableStateInvariantMiddleware,
@@ -16,6 +17,8 @@ import {
   getLog,
 } from 'console-testing-library/pure'
 
+type MWNext = Parameters<ReturnType<Middleware>>[0]
+
 describe('createImmutableStateInvariantMiddleware', () => {
   let state: { foo: { bar: number[]; baz: string } }
   const getState: Store['getState'] = () => state
@@ -31,17 +34,16 @@ describe('createImmutableStateInvariantMiddleware', () => {
   })
 
   it('sends the action through the middleware chain', () => {
-    const next: Dispatch = (action) => ({ ...action, returned: true })
-    const dispatch = middleware()(next)
+    const next: MWNext = vi.fn()
+    middleware()(next)
 
-    expect(dispatch({ type: 'SOME_ACTION' })).toEqual({
+    expect(next).toHaveBeenCalledWith({
       type: 'SOME_ACTION',
-      returned: true,
     })
   })
 
   it('throws if mutating inside the dispatch', () => {
-    const next: Dispatch = (action) => {
+    const next: MWNext = (action) => {
       state.foo.bar.push(5)
       return action
     }
@@ -54,7 +56,7 @@ describe('createImmutableStateInvariantMiddleware', () => {
   })
 
   it('throws if mutating between dispatches', () => {
-    const next: Dispatch = (action) => action
+    const next: MWNext = (action) => action
 
     const dispatch = middleware()(next)
 
@@ -66,7 +68,7 @@ describe('createImmutableStateInvariantMiddleware', () => {
   })
 
   it('does not throw if not mutating inside the dispatch', () => {
-    const next: Dispatch = (action) => {
+    const next: MWNext = (action) => {
       state = { ...state, foo: { ...state.foo, baz: 'changed!' } }
       return action
     }
@@ -79,7 +81,7 @@ describe('createImmutableStateInvariantMiddleware', () => {
   })
 
   it('does not throw if not mutating between dispatches', () => {
-    const next: Dispatch = (action) => action
+    const next: MWNext = (action) => action
 
     const dispatch = middleware()(next)
 
@@ -91,7 +93,7 @@ describe('createImmutableStateInvariantMiddleware', () => {
   })
 
   it('works correctly with circular references', () => {
-    const next: Dispatch = (action) => action
+    const next: MWNext = (action) => action
 
     const dispatch = middleware()(next)
 
@@ -107,7 +109,7 @@ describe('createImmutableStateInvariantMiddleware', () => {
 
   it('respects "isImmutable" option', function () {
     const isImmutable = (value: any) => true
-    const next: Dispatch = (action) => {
+    const next: MWNext = (action) => {
       state.foo.bar.push(5)
       return action
     }
@@ -120,7 +122,7 @@ describe('createImmutableStateInvariantMiddleware', () => {
   })
 
   it('respects "ignoredPaths" option', () => {
-    const next: Dispatch = (action) => {
+    const next: MWNext = (action) => {
       state.foo.bar.push(5)
       return action
     }
@@ -139,7 +141,7 @@ describe('createImmutableStateInvariantMiddleware', () => {
   })
 
   it('alias "ignore" to "ignoredPath" and respects option', () => {
-    const next: Dispatch = (action) => {
+    const next: MWNext = (action) => {
       state.foo.bar.push(5)
       return action
     }
@@ -154,7 +156,7 @@ describe('createImmutableStateInvariantMiddleware', () => {
   it('Should print a warning if execution takes too long', () => {
     state.foo.bar = new Array(10000).fill({ value: 'more' })
 
-    const next: Dispatch = (action) => action
+    const next: MWNext = (action) => action
 
     const dispatch = middleware({ warnAfter: 4 })(next)
 
@@ -170,7 +172,7 @@ describe('createImmutableStateInvariantMiddleware', () => {
   })
 
   it('Should not print a warning if "next" takes too long', () => {
-    const next: Dispatch = (action) => {
+    const next: MWNext = (action) => {
       const started = Date.now()
       while (Date.now() - started < 8) {}
       return action