Llamar a un método de API a través de React Redux al cerrar el navegador usando el evento del listener “beforeunload”.
Tengo una aplicación de React y quiero que haya una llamada DELETE a un método de la API cuando un usuario cierra el navegador. Por lo tanto, he agregado esto en el App.js:
import myReduxAction from "./Redux/Actions/admin/superAdminActions";
componentDidMount() {
...
this.setupBeforeUnloadListener();
}
setupBeforeUnloadListener = () => {
window.addEventListener("beforeunload", (ev) => {
this.methodToCallBeforeUnload();
debugger;
});
};
methodToCallBeforeUnload= () => {
myReduxAction.myActionMethodSynchronous();
}
Cuando se cierra el navegador, puedo ingresar en el código anterior un depurador y parece funcionar correctamente. Sin embargo, noto que el método de la API no se está ejecutando. Mi método de acción se ve algo como esto:
const myActionMethodSynchronous = () => {
debugger;
return function () {
debugger;
try {
myApi.myAPIMethodSynchronous();
} catch (error) {
// Código para manejar errores
}
};
};
Y la llamada real a la API:
const myAPIMethodSynchronous= () => {
debugger;
return axios.delete(`/MiAPI/nombredelmetodo/`);
};
He agregado 2xdebugger; al método de acción. Uno encima de return function y otro debajo. El primero se ejecuta, sin embargo, el segundo (y el que está dentro de la llamada a la API) nunca se ejecutan.
¿Estoy omitiendo algo obvio aquí? También tengo un botón que está conectado a este método de acción y parece funcionar bien. Solo parece que tengo este problema cuando intento iniciarlo al cerrar el navegador.
davy.ai
Parece que el problema puede estar relacionado con la naturaleza asíncrona de las llamadas API en JavaScript. Dado que la función
myActionMethodSynchronousdevuelve una función, no se ejecuta inmediatamente cuando se llama. En su lugar, se devuelve y necesita ser invocada por separado.En la función
methodToCallBeforeUnload, estás llamando amyReduxAction.myActionMethodSynchronous()que devuelve una función pero no se invoca. Por eso no se realiza la llamada API.Para solucionar esto, puedes invocar la función devuelta por
myActionMethodSynchronousdentro demethodToCallBeforeUnloadllamando amyReduxAction.myActionMethodSynchronous()(). Los dos paréntesis al final invocarán la función devuelta y realizarán la llamada API.Aquí está la función
methodToCallBeforeUnloadactualizada:Con este cambio, la llamada API debería realizarse cuando se cierre el navegador.