更改setTimeout在Redux中不起作用

Question

所以我的代码中有一个postActions.js，我在其中编写了所有Redux操作代码。其中的功能之一是注销代码。

这是代码。

export const logout = () => {
    localStorage.removeItem('token');
    localStorage.removeItem('expirationDate');
    return {
        type: AUTH_LOGOUT
    }
}

此注销操作创建者将在达到到期时间后被调用。使用如下所示的setTimeout函数可以完成此操作。

export const checkAuthTimeout = expirationTime => {
    return dispatch => {
        timeoutVar = setTimeout(() => {
            dispatch(logout());
        }, expirationTime*1000);
    }
} 

timeoutVar在代码的顶部声明，在所有此类函数之外。

var timeoutVar;

现在这是我的问题。每当有人在应用程序中处于活动状态时，我都希望将setTimeout更改为以后的时间，以使他在活动时不会注销。这是通过这样的代码完成的。 logoutTime是用于setTimeout的新时间。

clearTimeout(timeoutVar);
dispatch(checkAuthTimeout(logoutTime));

出于某种原因，以上代码没有更改setTimeout。可以说logoutTime是10，应该将setTimeout更改为从现在起再进行10秒，但是它什么也不会改变。

如果仅使用clearTimeout(timeoutVar)，则计时器停止。可以了但是当我也使用dispatch(checkAuthTimeout(logoutTime))时，该事件发生在旧时本身。我坚持了很长时间。请帮忙。

Answer 1

我找到了答案。最后。

自从它的React以来，我的组件被多次调用，这多次触发setTimeout函数。因此，有多个setTimeout实例正在运行。我已经在函数调用之外像这样调用setTimeout-

clearTimeout(timeoutVar);
dispatch(checkAuthTimeout(logoutTime));

但是由于某些没有clearTimeout的生命周期方法，在没有clearTimeout的其他位置也调用checkAuthTimeout，这创建了许多setTimeout实例。最安全的选择是在函数内部移动clearTimeout。像这样。

export const checkAuthTimeout = expirationTime => {
    return dispatch => {
    clearTimeout(timeoutVar); // ADD THIS JUST BEFORE SETTIMEOUT
        timeoutVar = setTimeout(() => {
            dispatch(logout());
        }, expirationTime*1000);
    }
} 

我只需要一直在setTimeout之前添加一个clearTimeout。