用户离开页面时使用redux-saga保存进度数据

Question

我正在构建一个系统，用户根据他们观看的视频的百分比对其进行评分。如果他们离开/刷新/关闭页面，我需要将他们的评分数据发布到API端点。

• 我使用beforeunload事件在用户更改位置时触发操作。

• 使用redux-saga处理操作。

• 我可以看到正在调度该操作，但似乎在调用端点之前窗口关闭（chrome dev工具显示调用但状态为已取消）。

有没有办法可靠地确保调用端点？当然有很多站点（最着名的是电子学习站点）能够始终如一地处理这种行为，因此必须有一个解决方案。

组件：

componentDidMount() {
window.addEventListener('beforeunload', this.onUnload);

}

componentWillUnmount() {
window.removeEventListener('beforeunload', this.onUnload);

}

onUnload() { 
this.props.postScore(params);

}

非常感谢任何帮助。

Answer 1

如果redux store是您的应用程序状态，即将开始使用，这是您不得不绕过商店的绝佳时机。

只需同步阅读商店并直接发布到api。

但即便如此，只有在浏览器触发＆＃34;卸载＆＃34;时才会保存进度。

如果页面没有响应，或者浏览器只是崩溃，那么处理程序和api调用将永远不会执行。

一个简单的策略是每隔x秒不断更新进度