[react]: Fix optional reducer action & limit args

mfp22 · mfp22 · commit cebd6848e7be · 2023-02-22T23:28:31.000-07:00
diff --git a/types/react/index.d.ts b/types/react/index.d.ts
@@ -860,9 +860,10 @@ declare namespace React {
     type Dispatch<A> = (value: A) => void;
     // Since action _can_ be undefined, dispatch may be called without any parameters.
     type DispatchWithoutAction = () => void;
-    // Get the dispatch type from the reducer arguments
-    type ActionDispatch<ReducerRest extends any[]> =
-        ReducerRest extends [any] ? Dispatch<ReducerRest[0]> : DispatchWithoutAction;
+    // Limit the reducer to accept only 0 or 1 action arguments
+    type AnyActionArg = [] | [any];
+    // Get the dispatch type from the reducer arguments (captures optional action argument correctly)
+    type ActionDispatch<ActionArg extends AnyActionArg> = (...args: ActionArg) => void;
     // Unlike redux, the actions _can_ be anything
     type Reducer<S, A> = (prevState: S, action: A) => S;
     // If useReducer accepts a reducer without action, dispatch may be called without any parameters.
@@ -913,7 +914,7 @@ declare namespace React {
      * @version 16.8.0
      * @see https://reactjs.org/docs/hooks-reference.html#usereducer
      */
-    function useReducer<S, A extends any[]>(
+    function useReducer<S, A extends AnyActionArg>(
         reducer: (prevState: S, ...args: A) => S,
         initialState: S
     ): [S, ActionDispatch<A> ];
@@ -927,7 +928,7 @@ declare namespace React {
      * @version 16.8.0
      * @see https://reactjs.org/docs/hooks-reference.html#usereducer
      */
-    function useReducer<S, I, A extends any[]>(
+    function useReducer<S, I, A extends AnyActionArg>(
         reducer: (prevState: S, ...args: A) => S,
         initialArg: I,
         init: (i: I) => S
diff --git a/types/react/test/hooks.tsx b/types/react/test/hooks.tsx
@@ -111,6 +111,19 @@ function useEveryHook(ref: React.Ref<{ id: number }>|undefined): () => boolean {
         { name: 'asdf' }
     );
 
+    // @ts-expect-error reducer should have at most 2 arguments
+    React.useReducer((v, a: any, b: any) => v, 0);
+
+    // useReducer should handle optional action
+    const reducerWithOptionalAction = (state: boolean, next?: boolean) => {
+        return next !== undefined ? next : !state;
+    };
+    const useToggle = (initialState: boolean) => React.useReducer(reducerWithOptionalAction, initialState);
+
+    const [isTooltipVisible, toggleTooltipVisibility] = useToggle(false);
+    toggleTooltipVisibility();
+    toggleTooltipVisibility(false);
+
     // inline object, to (manually) check if autocomplete works
     React.useReducer(reducer, { age: 42, name: 'The Answer' });
 
