draft.tsx

export default miniStateMachine<IComponentProps>({
   initialState,
   actions,
   components: {
     search: Search,
     newProduct: NewProduct,
     product: Poduct,
   },

   // WIP
   onChangeProp: 'prop',
   onChange:(state, props: IComponentProps) {
     
   },
});

useMiniReducer.ts

import * as React from 'react';

type ReplaceReturnType<T extends (...a: any) => any, TNewReturn> = (
  ...a: Parameters<T>
) => TNewReturn;

type OmitFirstArg<F> = F extends (x: any, ...args: infer P) => infer R
  ? (...args: P) => R
  : never;

export type ExtractDispatch<T extends object> = {
  [K in keyof T]-?: ReplaceReturnType<OmitFirstArg<T[K]>, void>;
};

export default function useMiniReducer<TState, TActions extends object>(
  actions: TActions,
  initialState: TState,
): [TState, ExtractDispatch<TActions>] {
  const [state, setState] = React.useState<TState>(initialState);

  return React.useMemo(() => {
    const dispatch = new Proxy(actions, {
      get(obj: any, prop) {
        return (...args: any) => {
          setState(obj[prop](state, ...args));
        };
      },
    }) as any;

    return [state, dispatch];
  }, [state, setState, actions]);
}