Typescript: Types for useActions hook

Hey!

We want to switch from easy-peasy to redux in order to reduce bundle size (amongst other things). We are working on the refactor/redux branch and it is looking all good but we have some issues with the correct types here:

Can someone help us with this:

export function useActions(actionSelector: (value: any) => any): any {
  const dispatch: ReactFlowDispatch = reduxUseDispatch();

  const action = useMemo(() => {
    // the actions variable is an object with all actions 
    const currAction: any = actionSelector(actions);
    return bindActionCreators(currAction, dispatch);
  }, [dispatch, actionSelector]);

  return action;
}

You can find the code here: https://github.com/wbkd/react-flow/blob/refactor/redux/src/store/hooks.ts#L17-L26

We want to use the hook like this but we are not sure which types we should use for the actionSelector function and the return type of the hook:

// at this point TS should know which params we can pass to the "someAction" action
const someAction = useActions(actions => actions.someAction);

Thanks for your help.

[moklick]

Thanks a lot @alexkuz 😃 This looks pretty good. I think it was the last missing piece in the refactor/redux branch. Without immer we are hopefully more flexible to do some performance improvements inside the redux actions/ reducers. The version is also about 10kb smaller.

[alexkuz]

So anyway, the TS definition could look like this:

type ActionCreatorSelector<Action> = (acts: typeof actions) => ActionCreator<Action>;
type ActionMapObjectSelector<Action> = (acts: typeof actions) => ActionCreatorsMapObject<Action>;
type ActionSelector<Action> = (acts: typeof actions) =>
  | ActionCreatorsMapObject<Action>
  | ActionCreator<Action>;

// these overrides are in case you want to support both single action and map object of actions
// if not, you can get rid of these and just use ActionCreatorSelector type
export function useActions<Action extends ReactFlowAction>(actionSelector: ActionCreatorSelector<Action>): ActionCreator<Action>;
export function useActions<Action extends ReactFlowAction>(actionSelector: ActionMapObjectSelector<Action>): ActionCreatorsMapObject<Action>;

export function useActions<Action extends ReactFlowAction>(actionSelector: ActionSelector<Action>) {
  const dispatch: ReactFlowDispatch = reduxUseDispatch();

  // the memoization here makes sense only for ActionSelector actually, not so much for ActionMapObjectSelector
  const currAction = actionSelector(actions);

  const action = useMemo(() => {
    // this looks weird but required if both ActionSelector and ActionMapObjectSelector are supported
    return typeof currAction === 'function'
      ? bindActionCreators(currAction, dispatch)
      : bindActionCreators(currAction, dispatch);
  }, [dispatch, currAction]);

  return action;
}