I am using redux-saga and @reduxjs/toolkit. I make some webservice requests and save their responses into redux, and I am following a pending/success/failure pattern I’ve seen mentioned in a few places. For my redux saga:

export default function* rootSaga() {
    yield takeEvery(actionGetData.toString(), handleGetData);
}

with my generator function:

function* handleGetData(action: any): Generator<any, any, any> {
    yield put({ type: 'ACTION.GETDATA_PENDING', payload: action.payload });
    try {
        const response = yield call(apiRequest);
        const responseData = response.data;
        yield put({ type: 'ACTION.GETDATA_FULFILLED', payload: { name: action.payload, data: responseData } });
    } catch (error: any) {
        yield put({ type: 'ACTION.GETDATA_FAILED', payload: { name: action.payload, data: error.message } });
    }
}

I save this status (pending, success, failure) into redux, and there is a visual component on the screen that corresponds to this status– a loading animation, or a success/failure notification, etc.

This all works great, but the issue is that when this apiRequest takes a while to complete and the user prematurely cancels the request– say, by closing the page before the webservice request returns a response. In this case, when the user reloads the page, the status is stuck in a “loading” state, except this time, no apiRequest will be made, so there is no way to exit this state with a success or failure, so a never-ending loading animation is shown to the user, and there is nothing to retry the webservice request.

What is the best way to resolve this? Is there a way to call a cleanup function that can be executed before the function exits (e.g. immediately call the ‘failed’ action if the page is prematurely stopped)? Is there a way to ‘watch’ this ‘pending’ status and trigger a retry if it has been stuck for a certain amount of time?

Any help would be appreciated.