如何处理进行中的请求以使用redux saga显示加载程序？

Posted 2021-04-14

在我的redux-saga应用中，可能同时发生多个api调用，因此需要显示各个加载程序和api响应成功/错误消息。

如何处理这种情况？

例如，通常保持以下redux状态：

{
 data : {},
 isError: false,
 isLoading: true
}

当api调用正在等待响应时，此处isLoading标志变为true。

[isError标志在api响应返回错误时变为true。

[data存储来自api的成功响应

当没有同时进行api调用时，上述方法可以正常工作。

如何同时发生不同的api调用时如何处理？

答案

对于这种情况：

而不是全局使用状态

{
 data : {},
 isError: false,
 isLoading: true
}

我们可以单独使用状态

像在每个不同的api调用中一样，我们可以使用不同的reducer，并且可以分别设置isError和isLoading的不同reducers。

现在在rootReducer中，我们以不同的方式分配所有的reducer，例如responseOfApi1，responseOfApi2等，我们可以在组件中像props.responseOfApi1，props.responseOfApi2一样访问它。

现在我们可以将isLoading定义为单个组件中的状态，并检查是否有任何props.responseOfApi1.isLoading || props.responseOfApi2.isLoading，那么我们可以setState（{isLoading：true}），如果props.responseOfApi1.isLoading && props.responseOfApi2.isLoading setState（{isLoading：false}）