Estoy usando React con Typescript. Tengo un requisito en el que tenemos una sección de filtros con DateRangePicker como un campo y un menú desplegable de casillas de verificación como otro. Cada vez que se selecciona un intervalo de fechas en el calendario y se hace clic en Aceptar, se llama a una función de controlador que, a su vez, envía una acción de reducción y, posteriormente, se envía una solicitud de API para filtrar los datos en función del intervalo de fechas seleccionado. De manera similar, cuando marcamos o desmarcamos una casilla de verificación en el segundo campo, se llama a otra función de controlador que, a su vez, envía una acción de reducción y, posteriormente, se envía una solicitud de API para filtrar los datos en función de los datos verificados. Ahora, necesito esperar 5 segundos para que el usuario seleccione el rango de fechas y ver si el usuario marca una casilla de verificación dentro de los 5 segundos. En caso afirmativo, solo necesito enviar una sola solicitud de API en lugar de dos (una para la selección del rango de fechas y otra para la selección de la casilla de verificación). Así es como se ven las funciones de mi controlador a continuación

 const dateChangeHandler = (value: DateRange | null, event: React.SyntheticEvent) => { setSelectedDateRange(value); dispatch(fetchFilteredData({ payload: { dateRange: value, selectedTools: selectedTools } })) } const selectionChangeHandler = (value: string[]) => { if (value.length > 0) { setSelectedTools(value); dispatch(fetchFilteredData({ payload: { dateRange: selectedDateRange, selectedTools: value } })) } else { dispatch(fetchFilteredData({ payload: { dateRange: selectedDateRange, selectedTools: [] } })) }

};

¿Alguna idea de cómo puedo continuar con esto? Cualquier ayuda sería muy apreciada. ¡Gracias por adelantado!