我们是否有任何lib来使用传奇捕获状态变化?

时间:2017-10-20 16:06:50

标签: redux react-redux redux-saga

当用户试图从当前页面/屏幕移动到另一个页面时,基本上需要构建一个警告模式,显示有一些已保存的更改。

使用redux和redux saga的任何实现

3 个答案:

答案 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作者自己建造的。

以下是其功能

  • 让您检查每个州和行动有效载荷
  • 让您通过“取消”行动及时回归
  • 如果更改缩减器代码,则每个“暂存”操作都将是 重新评估
  • 如果减速器投掷,你会看到这个动作 发生了,错误是什么
  • 使用persistState()存储增强器,您可以保留调试会话 跨页重新加载

答案 2 :(得分:0)

我最近也考虑过这个问题,并且一直在考虑编写某种形式的中间件来拦截路由操作。

当拦截路由操作时,中间件可以确定应用程序状态是否指示用户正在编辑某些未保存的数据,如果是,则调度不同的操作。该操作应该减少状态并导致呈现警告。然后,用户可以通过调度中间件拦截的操作来确认是否希望继续导航,以继续路由过程。