用户离开页面时使用 redux-saga 保存进度数据
Saving progress data with redux-saga when the user leaves the page
我正在构建一个系统,根据用户观看视频的百分比对用户进行评分。如果他们 leave/refresh / 关闭页面,我需要 post 他们的评分数据到 API 端点。
我使用 beforeunload
事件在用户更改位置时触发操作。
使用 redux-saga 处理动作。
- 我可以看到正在调度操作,但似乎 window 在调用端点之前关闭(chrome 开发工具显示调用但状态为已取消) .
有什么方法可以可靠地确保对端点进行调用?当然有很多网站(最著名的是电子学习网站)始终如一地处理这种行为,因此必须有一个解决方案。
组件:
componentDidMount() {
window.addEventListener('beforeunload', this.onUnload);
}
componentWillUnmount() {
window.removeEventListener('beforeunload', this.onUnload);
}
onUnload() {
this.props.postScore(params);
}
非常感谢任何帮助。
如果 redux store 是你的 app state,即将被 go kaput,这是你很少需要绕过 store 的时候。
只需同步读取存储并直接post到api。
但即使这样也只是在浏览器触发时保存进度 "unload"。
如果页面变得无响应,或者浏览器只是崩溃,处理程序和 api 调用将永远不会执行。
一个简单的策略是每 x 秒持续更新进度
我正在构建一个系统,根据用户观看视频的百分比对用户进行评分。如果他们 leave/refresh / 关闭页面,我需要 post 他们的评分数据到 API 端点。
我使用
beforeunload
事件在用户更改位置时触发操作。使用 redux-saga 处理动作。
- 我可以看到正在调度操作,但似乎 window 在调用端点之前关闭(chrome 开发工具显示调用但状态为已取消) .
有什么方法可以可靠地确保对端点进行调用?当然有很多网站(最著名的是电子学习网站)始终如一地处理这种行为,因此必须有一个解决方案。
组件:
componentDidMount() {
window.addEventListener('beforeunload', this.onUnload);
}
componentWillUnmount() {
window.removeEventListener('beforeunload', this.onUnload);
}
onUnload() {
this.props.postScore(params);
}
非常感谢任何帮助。
如果 redux store 是你的 app state,即将被 go kaput,这是你很少需要绕过 store 的时候。
只需同步读取存储并直接post到api。
但即使这样也只是在浏览器触发时保存进度 "unload"。
如果页面变得无响应,或者浏览器只是崩溃,处理程序和 api 调用将永远不会执行。
一个简单的策略是每 x 秒持续更新进度