如何撤消 Redux 异步操作？（多步返回状态）答案

【问题标题】：How to undo Redux Async Action? (multiple steps back in the state)如何撤消 Redux 异步操作？（多步返回状态）
【发布时间】：2015-10-20 13:16:44
【问题描述】：

如果我有一个带有 api 调用的异步操作，这可能是一个操作返回一个函数：

export function asyncAction(itemId) {
  return (dispatch) => {
    dispatch(requestStarted());

    return sendRequest(itemId).then(
      (result) =>  dispatch(requestSuccess()),
      (error) =>  dispatch(requestFail())
    );
  };
}

或者返回一个对象并使用中间件拦截它并做一些事情：

export function asyncAction(itemId) {
  return {
    type: [ITEM_REQUEST, ITEM_REQUEST_SUCCESS, ITEM_REQUEST_FAILURE],
    promise: sendRequest(itemId),
    userId
  };
}

// same middleware found in https://github.com/rackt/redux/issues/99
export default function promiseMiddleware() {
  return (next) => (action) => {
    const { promise, ...rest } = action;
    if (!promise) {
      return next(action);
    }

    next({ ...rest, readyState: 'request' );
    return promise.then(
      (result) => next({ ...rest, result, readyState: 'success' }),
      (error) => next({ ...rest, error, readyState: 'failure' })
    );
  };
}

现在我的问题是：我如何回滚到 asyncAction 被调度之前的状态，这实质上意味着两步回到状态（成功/失败 =>请求）带有 api 调用以撤消上一次 api 调用。
例如，删除一个待办事项（这是一个异步操作）后，会显示一个带有 undo 选项的弹出式快餐栏，单击它后，已删除的待办事项将与 api 调用一起添加回 UI将其添加回 db。

我试过redux-undo，但我觉得它不是为了解决这样的问题。
或者我应该忘记 'undo' 并在用户单击撤消选项时发送一个全新的 addTodo 操作？

提前致谢:-)

【问题讨论】：

标签： javascript asynchronous reactjs undo-redo redux

【解决方案1】：

Redux Optimist 可能是您需要的。

【讨论】：