检查 redux 应用程序中是否有未保存的更改答案

【问题标题】：Check is there are unsaved changes in a redux app检查 redux 应用程序中是否有未保存的更改
【发布时间】：2016-02-08 16:53:32
【问题描述】：

我正在寻找一个如何检查 react-redux 应用程序更改的示例。当试图离开当前路线时，应用程序将提示用户未保存的更改。

提前谢谢你。

【问题讨论】：

标签： reactjs react-router redux

【解决方案1】：

这样做会在你的组件中涉及到这样的事情：

onClickNavigationLink = () => {
  const { checkLocalState } = this.props;
  checkLocalState() // we have access cause of `connect`
    .then(res => {
      if (res.areChanges) {
        this.setState({ proptUserConfirmation: true })
      } else {
        this.onClickNavigationConfirmation();
      }
    })
}

onClickNavigationConfirmation = () => {
  const { push } = this.props;

  push('/nextURL');
}

然后你的动作看起来像

function checkLocalState() {
  return (dispatch, getState) => {
    return API.checkLocalState(getState());
  }
}

这需要一些可以区分本地状态和 redux 状态树的服务器端服务。但是，我并不真正推荐这种通用模式。如果用户有未保存的数据，您应该在本地应用程序状态中知道。

【讨论】：