当用户试图从当前页面/屏幕移动到另一个页面时,基本上需要构建一个警告模式,显示有一些已保存的更改。
使用redux和redux saga的任何实现
答案 0 :(得分:0)
Sagas 是的lib - 它们会监视指定类型的任何操作。导航将采取两个动作:一个用于指示即将发生导航(saga将观看哪个),另一个用于实际更新当前页面。传奇监视第一种类型的动作,并在数据发生变化时显示警告对话框。
例如:
function showWarning(action) {
if (/* data has been changed but not saved */) {
displayWarningDialog(action.pageToNavigateTo)
}
else {
// action that updates the page/location
completeNavigation(action.pageToNavigateTo)
}
}
function* mySaga() {
// NAVIGATE_TO_PAGE_X are the actions that get fired when a user changes pages
yield takeEvery("NAVIGATE_TO_PAGE_1", showWarning)
yield takeEvery("NAVIGATE_TO_PAGE_2", showWarning)
}
答案 1 :(得分:0)
状态调试有惊人的Redux DevTools。这个工具是由Redux作者自己建造的。
以下是其功能
答案 2 :(得分:0)
我最近也考虑过这个问题,并且一直在考虑编写某种形式的中间件来拦截路由操作。
当拦截路由操作时,中间件可以确定应用程序状态是否指示用户正在编辑某些未保存的数据,如果是,则调度不同的操作。该操作应该减少状态并导致呈现警告。然后,用户可以通过调度中间件拦截的操作来确认是否希望继续导航,以继续路由过程。