反应样板：在传奇中没有减少调度的动作答案

【问题标题】：react boilerplate: dispatched action not being reduced in saga反应样板：在传奇中没有减少调度的动作
【发布时间】：2017-08-09 00:36:10
【问题描述】：

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

【问题讨论】：

标签： javascript reactjs react-redux redux-saga react-boilerplate

【解决方案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);
    ...

【讨论】：