0

使用react-boilerplate我有一个传奇是正确地将数据保存到服务器。我想为延迟保存警告发出警告(在超时完成之前)。为了模拟这一点,我在服务器上等待5秒,并在警告开始之前等待1秒钟。反应样板:调度的行动没有被减少在传奇

我已经尝试了许多与此选项,但问题的关键是动作:autoSaveTimeOutAction超时功能中派出不是在减速功能正在减少。

我的问题是为什么会发生这种情况?我怎样才能使它工作?

这里是我的输出:

10:26:04.523 client.js:62 [HMR] connected 
10:26:06.722 sagas.js?7e80********:111 attemptAutoSaveSaga starts 
10:26:06.722 actions.js:111 autoSaveInitiatedAction 
10:26:07.725 actions.js:119 autoSaveTimeOutAction 
10:26:11.890 actions.js:127 autoSaveSuccessAction 
10:26:11.891 reducer.js:72 Reducer: ACTIONS.API.AUTOSAVE.SUCCESS 

和代码摘录:

saga.js .... 
export function* attemptAutoSaveSaga() { 
    let autoSaveTimeOut; 
    console.log('attemptAutoSaveSaga starts'); 
    try { 
    const dataToSave = yield select(apiFirstNonSentSyncingSelector()); 
    yield put(autoSaveInitiatedAction(dataToSave)); 
    const url = `${API.URL}subjects/auto_save`; 
    const options = { 
     method: API.METHODS.POST, 
     credentials: 'include', 
     body: JSON.stringify(dataToSave), 
    }; 
    autoSaveTimeOut = setTimeout(() => { put(autoSaveTimeOutAction(dataToSave)); }, 1000); 
    const payload = yield call(request, url, options); 
    yield (put(autoSaveSuccessAction(payload))); 
    clearTimeout(autoSaveTimeOut); 

    } catch (error) { 
    clearTimeout(autoSaveTimeOut); 
    ... 
    } 
} 
export function* autoSaveSaga() { 
    const watcher = yield takeLatest(ACTIONS.API.AUTOSAVE.REQUESTED, attemptAutoSaveSaga); 
    yield take(LOCATION_CHANGE); 
    yield cancel(watcher); 
} 


reducer.js 
... 
    case ACTIONS.API.AUTOSAVE.SUCCESS: { 
     console.log('Reducer: ACTIONS.API.AUTOSAVE.SUCCESS'); 
... 
    case ACTIONS.API.AUTOSAVE.TIMEOUT: { 
     console.log('Reducer: ACTIONS.API.AUTOSAVE.TIMEOUT'); 
     return state; 
    } 
... 


actions.js 

... 
export function autoSaveInitiatedAction(payload) { 
    console.log('autoSaveInitiatedAction'); 
    return ({ 
    type: ACTIONS.API.AUTOSAVE.INITIATED, 
    payload, 
    }); 
} 

export function autoSaveTimeOutAction(payload) { 
    console.log('autoSaveTimeOutAction'); 
    return ({ 
    type: ACTIONS.API.AUTOSAVE.TIMEOUT, 
    payload, 
    }); 
} 

export function autoSaveSuccessAction(payload) { 
    console.log('autoSaveSuccessAction'); 
    return { 
    type: ACTIONS.API.AUTOSAVE.SUCCESS, 
    payload, 
    }; 
} 
... 

回答

0

解决这个,我需要到餐桌的延迟,完全不使用JavaScript超时而取消任务的时候服务器数据已成功返回。

function* delayStart(dataToSave) { 
    yield call(delay, 1000); 
    yield put(autoSaveTimeOutAction(dataToSave)); 
} 

export function* attemptAutoSaveSaga() { 
    let delayStartTask; 
    try { 
    const dataToSave = yield select(apiFirstNonSentSyncingSelector()); 
    console.log('attemptAutoSaveSaga starts'); 
    yield put(autoSaveInitiatedAction(dataToSave)); // this is to set sent and timestamp. 
    const url = `${API.URL}subjects/auto_save`; 
    const options = { 
     method: API.METHODS.POST, 
     credentials: 'include', 
     body: JSON.stringify(dataToSave), 
    }; 
    delayStartTask = yield fork(delayStart, dataToSave); 
    const payload = yield call(request, url, options); 
    yield (put(autoSaveSuccessAction(payload))); 
    yield cancel(delayStartTask); 

    } catch (error) { 
    yield cancel(delayStartTask); 
    ...