Refine typing of base reducer

WordPress · Jul 27, 2022 · 9aef4eb · 9aef4eb
1 parent 633709a
commit 9aef4eb
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 5 deletions.
diff --git a/packages/components/src/input-control/reducer/actions.ts b/packages/components/src/input-control/reducer/actions.ts
@@ -24,7 +24,7 @@ interface EventPayload {
 	event?: SyntheticEvent;
 }
 
-interface Action< Type, ExtraPayload = {} > {
+export interface Action< Type = string, ExtraPayload = {} > {
 	type: Type;
 	payload: EventPayload & ExtraPayload;
 }

diff --git a/packages/components/src/input-control/reducer/reducer.ts b/packages/components/src/input-control/reducer/reducer.ts
@@ -50,7 +50,7 @@ function mergeInitialState(
  */
 function inputControlStateReducer(
 	composedStateReducers: StateReducer
-): StateReducer {
+): StateReducer< actions.ControlAction > {
 	return ( state, action ) => {
 		const nextState = { ...state };
 
@@ -151,7 +151,7 @@ export function useInputControlStateReducer(
 	initialState: Partial< InputState > = initialInputControlState,
 	onChangeHandler: InputChangeCallback
 ) {
-	const [ state, dispatch ] = useReducer< StateReducer >(
+	const [ state, dispatch ] = useReducer(
 		inputControlStateReducer( stateReducer ),
 		mergeInitialState( initialState )
 	);

diff --git a/packages/components/src/input-control/reducer/state.ts b/packages/components/src/input-control/reducer/state.ts
@@ -6,7 +6,7 @@ import type { Reducer, SyntheticEvent } from 'react';
 /**
  * Internal dependencies
  */
-import type { ControlAction, InputAction } from './actions';
+import type { Action, InputAction } from './actions';
 
 export interface InputState {
 	_event?: SyntheticEvent;
@@ -19,7 +19,10 @@ export interface InputState {
 	value?: string;
 }
 
-export type StateReducer = Reducer< InputState, InputAction | ControlAction >;
+export type StateReducer< SpecializedAction = Action > = Reducer<
+	InputState,
+	InputAction | SpecializedAction
+>;
 
 export const initialStateReducer: StateReducer = ( state: InputState ) => state;