javascript - react 样板:在传奇中不会减少 dispatch 的 Action

使用react-boilerplate我有一个传奇，正确地将数据保存到服务器。我想为延迟保存的警告添加警告（在完全超时之前）。为了模拟这一点，我在服务器上等待了5秒，在警告开始之前等待了1秒。

我已经尝试了许多选项，但问题的症结在于操作：在reducer函数中不会减少在超时功能期间调度的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,
  };
}
...

最佳答案

为了解决这个问题，我需要避免延迟，根本不使用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);
    ...