ivan quintero February 2016

Check is there are unsaved changes in a redux app

I would like to see examples of how to check if changes in a client react-redux application can be compared to the corresponding server state. This in order to check whether to warn the user about unsaved changes in an app when trying to navigate to another route.

Thanks in advance.

Answers


Nathan Hagen February 2016

Doing this would involve something like this in your component:

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');
}

and then your action would look like

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

This would require some server-side service that can diff local state and the redux state tree. I don't really recommend this general pattern to begin with, however. You should know in your local application state if the user has unsaved data.

Post Status

Asked in February 2016
Viewed 3,052 times
Voted 14
Answered 1 times

Search




Leave an answer