Ensure void action creators can't be passed as event handlers

reduxjs · Nov 30, 2022 · 90283e9 · 90283e9
1 parent 56ed8a4
commit 90283e9
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/packages/toolkit/src/createAction.ts b/packages/toolkit/src/createAction.ts
@@ -144,7 +144,7 @@ export interface ActionCreatorWithoutPayload<T extends string = string>
    * Calling this {@link redux#ActionCreator} will
    * return a {@link PayloadAction} of type `T` with a payload of `undefined`
    */
-  (): PayloadAction<undefined, T>
+  (noArgument: void): PayloadAction<undefined, T>
 }
 
 /**

diff --git a/...oolkit/src/tests/createAction.typetest.ts → ...olkit/src/tests/createAction.typetest.tsx b/...oolkit/src/tests/createAction.typetest.ts → ...olkit/src/tests/createAction.typetest.tsx
@@ -1,3 +1,4 @@
+import React from 'react'
 import type { Action, AnyAction, ActionCreator } from 'redux'
 import type {
   PayloadAction,
@@ -344,3 +345,15 @@ import { expectType } from './helpers'
   type AnyPayload = ReturnType<typeof anyCreator>['payload']
   expectType<IsAny<AnyPayload, true, false>>(true)
 }
+
+// Verify action creators should not be passed directly as arguments
+// to React event handlers if there shouldn't be a payload
+{
+  const emptyAction = createAction<void>('empty/action')
+  function TestComponent() {
+    // This typically leads to an error like:
+    //  // A non-serializable value was detected in an action, in the path: `payload`.
+    // @ts-expect-error Should error because `void` and `MouseEvent` aren't compatible
+    return <button onClick={emptyAction}>+</button>
+  }
+}