5

我想使用 redux 对以下异步逻辑进行建模：

  1. 用户操作会触发一系列异步 API 调用。
  2. 任何 API 调用都可能返回 401 状态（登录超时）
  3. 如果 API 响应 401，则显示重新登录弹出窗口
  4. 重新登录成功后，重新发出 API 调用并继续

我不知道把这个逻辑放在哪里。Actions不知道其他actions，它们只有dispatch的权限，所以不能停下来等待它们完成。Reducers 无法访问 dispatch，所以我不能把它放在那里……那么它在哪里？自定义中间件？商店听听？在智能组件中？

我目前正在使用 redux-promise-middleware 和 redux-thunk。如何最好地组织这种类型的流程——而不需要购买像 redux-saga 或 redux-rx 之类的东西？

也不确定透明中断 API 调用以执行其他操作的最佳方法，即 API 调用在可选登录过程完成之前不应触发其完成或失败的操作。

4

1 回答 1

1

在我看来，您需要一个能够生成 Thunk 并将所有逻辑保留在 Thunk 中的动作创建器。确实没有其他好的方法可以保留您的 API 调用套件之间的关联，并确保在失败时取消所有其他调用。

  1. 在那个 Thunk 中，您将触发您的 API 调用，并收集它们的承诺：

    const call1 = promiseGenerator1();
const call2 = promiseGenerator2();
const call3 = promiseGenerator3();
const allCallPromises = [call1, call2, call3];

  2. 使用all()Promise 处理程序来监视它们：

    const watcher = Promise.all(allCallPromises).then(allSuccess, anyFail);

  3. 您的失败处理程序将：

    • 如果其中任何一个是 401，则取消其余的承诺。（注意，这需要一个像 Bluebird 这样的库，它具有取消语义，或者您的承诺/请求的某种其他形式的增强。）

    • 调度一个动作或路由更改以触发重新登录窗口

      anyFail(error) => {
    if (error.status === 401) {
        allCallPromises.forEach((item)=> {item.cancel();});
        reLogin();
    }
}

  4. 然后，我倾向于让您的重新登录组件担心再次重新触发相同的复杂操作，以发出所有调用。

  5. 但是，如果您的 API 调用套件以某种方式可变或特定于上下文，您可以从处理程序内部缓存您需要的那些anyFail。有一个减速器，你可以在其中存放一个actionPendingReLogin. 编写一个将重新触发与上次相同的调用的操作，然后调度它：

    dispatch(createAction('CACHE_RELOGIN_ACTION`, actionObjectToSaveForLater));

    （或者，只缓存您使用的任何动作创建器。）

    然后，在成功重新登录后，您可以：

    const action = store.getState('actionPendingReLogin');
dispatch(action);
// or:
const actionCreator = store.getState('actionPendingReLogin');
dispatch(actionCreator());

哦：在您的allSuccess处理程序中，您只需调度异步调用的结果。

于 2016-06-09T03:26:16.643 回答