Best practice to make a functional entity return both an Object & a Function

Question

This question is an elaboration for my other question Default handler for a functional class in JavaScript.

I am trying to build a redux action component, something initialized on startup with some configurations and then executed on runtime to dispatch a certain action.

import {useDispatch} from 'react-redux';

function ReduxAction(id, config) {
  /*some logic*/
}

ReduxAction.prototype.call = function call() {
  const dispatch = useDispatch();
  dispatch({ type: 'test_action', payload: {} });
  console.log('Redux Action dispatched');
}

Here is my defined ReduxAction, outside of any react component.

const doTest = new ReduxAction('test', { payload: 'Test' });

And in the snippet below, the action is being called with a certain input { email: '', password: '' } in this case.

const LoginScreen = () => {
  const onTestPress = () => doTest({ email: '', password: '' });

  return <Button onPress={onTestPress}/>
}

Expected Behavior: Action { type: 'test', payload: { email: '', password: '' } } to be dispatched.

Main concern: The reason why i am trying to call my action like this is to avoid importing useDispatch and using const dispatch = useDispatch() in each component i am planning to dispatch an action from. Thus i wanted to place the useDispatch one step higher before calling my ReduxAction with its corresponding payload. Any ideas?

Any feedback over the technique to solve this is more than welcome. Thanks in advance!