检查redux应用中是否有未保存的更改

Question

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

提前谢谢。

Answer 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状态树的服务器端服务。但是，我并不是真的推荐这种一般模式。如果用户有未保存的数据，您应该知道在本地应用程序状态。