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

问题描述 投票:0回答:1

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

如何处理这种情况?

例如,通常保持以下redux状态:

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

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

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

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

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

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

reactjs react-redux redux-saga
1个回答
1
投票

对于这种情况:

而不是全局使用状态

{
 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})

© www.soinside.com 2019 - 2024. All rights reserved.