反應樣板：調度的行動沒有被減少在傳奇

Question

使用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, 
    }; 
} 
... 

Answer 1

解決這個，我需要到餐桌的延遲，完全不使用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); 
    ...