Question

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

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

我不确定在哪里放这个逻辑。行动不了解其他行动，他们只能访问调度，因此他们无法停止并等待他们完成。减速机无法进行派遣，所以我无法将其放在那里......那么它在哪里生活？自定义中间件？ store.listen？在智能组件中？

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

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

Answer 1

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

在那个Thunk中，您可以激活您的API调用，并收集他们的承诺：

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

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

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

您的失败处理程序将：
- 取消其余的承诺，如果他们中的任何一个401。（注意，这需要像Bluebird这样的库具有取消语义，或者您的承诺/请求的其他形式的扩充。）
- 调度操作或路由更改以触发重新登录窗口
```
anyFail(error) => {
    if (error.status === 401) {
        allCallPromises.forEach((item)=> {item.cancel();});
        reLogin();
    }
}
```
然后，我倾向于让你的relogin组件再次担心重新触发相同的复杂动作，发出所有电话。
但是，如果您的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处理程序中，您只需调度异步调用的结果。

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

1 个答案: