重新开始并承诺取得进展
Redux and promise progress
我如何处理并承诺在 redux 中取得进展?
我想在执行承诺时显示一些旋转条或其他东西,我正在使用 axios 来处理请求,但他们有一个 api 来处理请求的配置对象中的进度:
{
progress: function(progressEvent) {
// Do whatever you want with the native progress event
}
}
但我只能在 redux 操作中发送请求,例如:
return {
type: "HTTP_REQUEST",
payload: axios.get("/webAPI/data", configObj)
}
如何在这些条件下处理进度事件?
虽然加卜达拉的回答是正确的,但我觉得它只是部分回答了这个问题。如果您愿意,可以轻松组合两个答案中的代码。
如果确实要向用户显示进度,可以从进度回调中调度特定的进度操作,并将当前进度作为有效负载。像这样:
{
progress: function(progressEvent) {
return dispatch({
type: "HTTP_REQUEST_PROGRESS",
payload: {
url: "/webAPI/data",
currentBytes: progressEvent.current,
totalBytes: progressEvent.total // properties on progressEvent made up by yours truly
}
});
}
}
从本质上讲,您只需要另一个表示request progress
的操作,就像您已经有一个用于启动请求的操作(并且可能是一个成功和不成功结果的操作)。
如果您只显示微调器而不是进度条,那么您真的不需要进度函数。相反,我会推荐一些类似的东西:
const axiosAction = function(configObj) {
// We have to thunk the dispatch since this is async - need to use the thunk middleware for this type of construct
return dispatch => {
/* action to notify the spinner to start (ie, update your store to have a
loading property set to true that will presentationally start the spinner) */
dispatch({
type: 'AXIOS_REQUEST_STARTING'
});
return axios.get("/webAPI/data", configObj)
.then(res => {
/* action to set loading to false to stop the spinner, and do something with the res */
return dispatch({
type: 'AXIOS_REQUEST_FINISHED',
payload: res,
})
})
.catch(err => /* some error handling*/);
};
}
编辑以添加 redux-thunk 的链接
相关文章:
- 如何在从顶部滚动时暂停转盘/滑块,并在滚动到顶部时重新开始
- 更新画布上的高度/宽度并重新开始绘制
- 如果我重新加载页面,倒计时将重新开始 - 如何设置修复
- 重新开始并承诺取得进展
- JQuery 自动收报机通过减速和停止然后重新开始来播放
- 如何重置 jquery 动画并重新开始
- 失败后重新开始承诺
- 清除答案,重新开始JS计算器
- 每8小时到达00:00:00时刷新页面并重新开始倒计时
- 是否存在循环“;重新开始”;
- jQuery添加类数字到x并重新开始
- For循环jQuery,在4个项目后重新开始
- 如何在用户重新开始后删除动态创建的jQuery对象?在纸上
- 在THREE.js中暂停后重新开始游戏
- 倒计时在凌晨3点,上午9点,下午3点和晚上9点重新开始
- 如何从元素中清除css重新开始
- 重置计数器,重新开始
- plupload:重新开始上传(使用分块)
- 如何修改CSS3滚动框动画无限循环,而不是重新开始
- 如何使从02:00开始的计时器达到00:00,然后在06:00重新开始?