create action creator middleware

Author: EskiMojo14

packages/toolkit/src/actionCreatorInvariantMiddleware.ts

@@ -0,0 +1,32 @@
+import type { Middleware } from 'redux'
+import { isActionCreator as isRTKAction } from './createAction'
+
+export interface ActionCreatorInvariantMiddlewareOptions {
+  /**
+   * The function to identify whether a value is an action creator.
+   * The default checks for a function with a static type property and match method.
+   */
+  isActionCreator?: (action: unknown) => action is Function & { type?: unknown }
+}
+
+export function getMessage(type?: unknown) {
+  return `Detected an action creator with type "${
+    type || 'unknown'
+  }" being dispatched. 
+        Make sure you're calling the action before dispatching, i.e. \`dispatch(actionCreator())\` instead of \`dispatch(actionCreator)\`. This is necessary even if the action has no payload.`
+}
+
+export function createActionCreatorInvariantMiddleware(
+  options: ActionCreatorInvariantMiddlewareOptions = {}
+): Middleware {
+  if (process.env.NODE_ENV === 'production') {
+    return () => (next) => (action) => next(action)
+  }
+  const { isActionCreator = isRTKAction } = options
+  return () => (next) => (action) => {
+    if (isActionCreator(action)) {
+      console.warn(getMessage(action.type))
+    }
+    return next(action)
+  }
+}

packages/toolkit/src/createAction.ts

@@ -5,6 +5,7 @@ import type {
   IfVoid,
   IsAny,
 } from './tsHelpers'
+import { hasMatchFunction } from './tsHelpers'
 import isPlainObject from './isPlainObject'
 
 /**
@@ -293,6 +294,20 @@ export function isAction(action: unknown): action is Action<unknown> {
   return isPlainObject(action) && 'type' in action
 }
 
+/**
+ * Returns true if value is an RTK-like action creator, with a static type property and match method.
+ */
+export function isActionCreator(
+  action: unknown
+): action is BaseActionCreator<unknown, string> & Function {
+  return (
+    typeof action === 'function' &&
+    'type' in action &&
+    // hasMatchFunction only wants Matchers but I don't see the point in rewriting it
+    hasMatchFunction(action as any)
+  )
+}
+
 /**
  * Returns true if value is an action with a string type and valid Flux Standard Action keys.
  */

packages/toolkit/src/getDefaultMiddleware.ts

@@ -1,6 +1,8 @@
 import type { Middleware, AnyAction } from 'redux'
 import type { ThunkMiddleware } from 'redux-thunk'
 import thunkMiddleware from 'redux-thunk'
+import type { ActionCreatorInvariantMiddlewareOptions } from './actionCreatorInvariantMiddleware'
+import { createActionCreatorInvariantMiddleware } from './actionCreatorInvariantMiddleware'
 import type { ImmutableStateInvariantMiddlewareOptions } from './immutableStateInvariantMiddleware'
 /* PROD_START_REMOVE_UMD */
 import { createImmutableStateInvariantMiddleware } from './immutableStateInvariantMiddleware'
@@ -23,6 +25,7 @@ interface GetDefaultMiddlewareOptions {
   thunk?: boolean | ThunkOptions
   immutableCheck?: boolean | ImmutableStateInvariantMiddlewareOptions
   serializableCheck?: boolean | SerializableStateInvariantMiddlewareOptions
+  actionCreatorCheck?: boolean | ActionCreatorInvariantMiddlewareOptions
 }
 
 export type ThunkMiddlewareFor<
@@ -72,6 +75,7 @@ export function getDefaultMiddleware<
     thunk: true
     immutableCheck: true
     serializableCheck: true
+    actionCreatorCheck: true
   }
 >(
   options: O = {} as O
@@ -80,6 +84,7 @@ export function getDefaultMiddleware<
     thunk = true,
     immutableCheck = true,
     serializableCheck = true,
+    actionCreatorCheck = true,
   } = options
 
   let middlewareArray = new MiddlewareArray<Middleware[]>()
@@ -120,6 +125,17 @@ export function getDefaultMiddleware<
         createSerializableStateInvariantMiddleware(serializableOptions)
       )
     }
+    if (actionCreatorCheck) {
+      let actionCreatorOptions: ActionCreatorInvariantMiddlewareOptions = {}
+
+      if (!isBoolean(actionCreatorCheck)) {
+        actionCreatorOptions = actionCreatorCheck
+      }
+
+      middlewareArray.push(
+        createActionCreatorInvariantMiddleware(actionCreatorOptions)
+      )
+    }
   }
 
   return middlewareArray as any

packages/toolkit/src/index.ts

@@ -40,6 +40,7 @@ export {
   createAction,
   getType,
   isAction,
+  isActionCreator,
   isFSA as isFluxStandardAction,
 } from './createAction'
 export type {
@@ -78,6 +79,8 @@ export type {
   CaseReducerWithPrepare,
   SliceActionCreator,
 } from './createSlice'
+export type { ActionCreatorInvariantMiddlewareOptions } from './actionCreatorInvariantMiddleware'
+export { createActionCreatorInvariantMiddleware } from './actionCreatorInvariantMiddleware'
 export {
   // js
   createImmutableStateInvariantMiddleware,

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

@@ -0,0 +1,64 @@
+import type { ActionCreatorInvariantMiddlewareOptions } from '@internal/actionCreatorInvariantMiddleware'
+import { getMessage } from '@internal/actionCreatorInvariantMiddleware'
+import { createActionCreatorInvariantMiddleware } from '@internal/actionCreatorInvariantMiddleware'
+import type { Dispatch, MiddlewareAPI } from '@reduxjs/toolkit'
+import { createAction } from '@reduxjs/toolkit'
+
+describe('createActionCreatorInvariantMiddleware', () => {
+  const consoleSpy = jest.spyOn(console, 'warn').mockImplementation(() => {})
+
+  afterEach(() => {
+    consoleSpy.mockClear()
+  })
+  afterAll(() => {
+    consoleSpy.mockRestore()
+  })
+
+  const dummyAction = createAction('anAction')
+
+  it('sends the action through the middleware chain', () => {
+    const next: Dispatch = (action) => ({
+      ...action,
+      returned: true,
+    })
+    const dispatch = createActionCreatorInvariantMiddleware()(
+      {} as MiddlewareAPI
+    )(next)
+
+    expect(dispatch(dummyAction())).toEqual({
+      ...dummyAction(),
+      returned: true,
+    })
+  })
+
+  const makeActionTester = (
+    options?: ActionCreatorInvariantMiddlewareOptions
+  ) =>
+    createActionCreatorInvariantMiddleware(options)({} as MiddlewareAPI)(
+      (action) => action
+    )
+
+  it('logs a warning to console if an action creator is mistakenly dispatched', () => {
+    const testAction = makeActionTester()
+
+    testAction(dummyAction())
+
+    expect(consoleSpy).not.toHaveBeenCalled()
+
+    testAction(dummyAction)
+
+    expect(consoleSpy).toHaveBeenLastCalledWith(getMessage(dummyAction.type))
+  })
+
+  it('allows passing a custom predicate', () => {
+    let predicateCalled = false
+    const testAction = makeActionTester({
+      isActionCreator(action): action is Function {
+        predicateCalled = true
+        return false
+      },
+    })
+    testAction(dummyAction())
+    expect(predicateCalled).toBe(true)
+  })
+})

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

@@ -15,6 +15,7 @@ import thunk from 'redux-thunk'
 import type { ThunkMiddleware } from 'redux-thunk'
 
 import { expectType } from './helpers'
+import { BaseActionCreator } from '@internal/createAction'
 
 describe('getDefaultMiddleware', () => {
   const ORIGINAL_NODE_ENV = process.env.NODE_ENV
@@ -54,12 +55,19 @@ describe('getDefaultMiddleware', () => {
     expect(middleware.length).toBe(defaultMiddleware.length - 1)
   })
 
+  it('removes the action creator middleware if disabled', () => {
+    const defaultMiddleware = getDefaultMiddleware()
+    const middleware = getDefaultMiddleware({ actionCreatorCheck: false })
+    expect(middleware.length).toBe(defaultMiddleware.length - 1)
+  })
+
   it('allows passing options to thunk', () => {
     const extraArgument = 42 as const
     const middleware = getDefaultMiddleware({
       thunk: { extraArgument },
       immutableCheck: false,
       serializableCheck: false,
+      actionCreatorCheck: false,
     })
 
     const m2 = getDefaultMiddleware({
@@ -129,6 +137,7 @@ describe('getDefaultMiddleware', () => {
         },
       },
       serializableCheck: false,
+      actionCreatorCheck: false,
     })
 
     const reducer = () => ({})
@@ -153,6 +162,7 @@ describe('getDefaultMiddleware', () => {
           return true
         },
       },
+      actionCreatorCheck: false,
     })
 
     const reducer = () => ({})
@@ -168,6 +178,33 @@ describe('getDefaultMiddleware', () => {
   })
 })
 
+it('allows passing options to actionCreatorCheck', () => {
+  let actionCreatorCheckWasCalled = false
+
+  const middleware = getDefaultMiddleware({
+    thunk: false,
+    immutableCheck: false,
+    serializableCheck: false,
+    actionCreatorCheck: {
+      isActionCreator: (action: unknown): action is Function => {
+        actionCreatorCheckWasCalled = true
+        return false
+      },
+    },
+  })
+
+  const reducer = () => ({})
+
+  const store = configureStore({
+    reducer,
+    middleware,
+  })
+
+  store.dispatch({ type: 'TEST_ACTION' })
+
+  expect(actionCreatorCheckWasCalled).toBe(true)
+})
+
 describe('MiddlewareArray functionality', () => {
   const middleware1: Middleware = () => (next) => (action) => next(action)
   const middleware2: Middleware = () => (next) => (action) => next(action)