Tengo una función llamada scheduleShortcut que se usa en un par de lugares a lo largo de una aplicación. Inicialmente, esta función era local para los componentes específicos, pero dado que se usa varias veces, quiero refactorizar esta función en una función global.

Al principio, traté de hacer lo siguiente:

 const history = useHistory(); const dispatch = useDispatch(); export const scheduleShortcut = (jobId: number) => { dispatch(jobGanttFocus(jobId)); dispatch(focusJobScheduleFilter(jobId)); dispatch(toggleScheduleView('jobs')); history.push('/schedule'); };

Sin embargo, cuando hago esto, aparece un error que dice que no puedo usar useHistory o useDispatch a menos que estén dentro de un componente React o un gancho personalizado. Luego, traté de convertir scheduleShortcut en un enlace personalizado de la siguiente manera:

 export const useScheduleShortcut = (jobId: number) => { const history = useHistory(); const dispatch = useDispatch(); dispatch(jobGanttFocus(jobId)); dispatch(focusJobScheduleFilter(jobId)); dispatch(toggleScheduleView('jobs')); history.push('/schedule'); };

Esto me permitió utilizar useDispatch y useHistory. Sin embargo, cuando trato de llamar a esta función dentro de los componentes específicos en los que la necesito, aparece un error similar. Básicamente, dice que no puedo usar mi enlace personalizado (es decir useScheduleShortcut ) dentro de una devolución de llamada.

 <Roster jobId={job.id} assignWorkers={canAssignWorker ? handleAssignWorkers : undefined} scheduleShortcut={() => useScheduleShortcut(jobId)} />

¿Hay alguna manera de evitar estos errores y usar el método abreviado de programación como una función reciclable? ¿O de hecho esto no es posible ya que estoy usando los ganchos?