我应该在哪里编写Redux中的复杂异步流？

Question

我想使用redux建模以下异步逻辑:

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

我不知道在哪里放这个逻辑.操作不了解其他操作,他们只能访问调度,因此他们无法停止并等待它们完成.减速器无法发送,所以我不能把它放在那里......所以它住在哪里？自定义中间件？store.listen？在智能组件？

我目前正在使用redux-promise-middleware和redux-thunk.如何最好地组织这种类型的流程 - 不需要买入像redux-saga或redux-rx等那样的东西？

还不确定透明地中断API调用以执行其他操作的最佳方法,即API调用不应在可选登录过程完成之后触发其已完成或失败的操作.

Answer 1

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

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

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

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

   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 调用套件在某种程度上是可变的或特定于上下文的，您可以从处理程序内部在存储上缓存您需要的 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处理程序中，您只需分派异步调用的结果即可。