CODEWITHSUNDEEP
reactjsreduxreact-redux
Pismotality
Pismotality

Reputation: 2289

How to detect changes in Redux form

I am new to React-Redux, and am trying to launch an "unsaved changes" dialog whenever the user tries to exit without saving changes. I thought that Redux does this for you with implementation of isDirty. I have tried unsuccessfully to implement this; the form always opens with dirty === true, even though no changes were made. Please tell me what I am doing wrong, or what I can do to detect changes anywhere in the Redux form.

Thus far I have 

    import { Field, Form, reduxForm, change, isDirty } from 'redux-form';
        ...
            this.state = {
                    dirty: isDirty('ClientViewForm'),
        ...
    public onCancel = (close: boolean) => {
            if (this.state.dirty) {
                this.showUnsavedChangesDialog();
            } 
        }
    ...
    public showUnsavedChangesDialog = () => {
        this.setState({ displayUnsavedChangesDialog: true })
    }

and in the Redux form:

<Dialog appendTo={document.body} header="Unsaved Changes Exist" onHide={thisComponent.hideUnsavedChangesDialog} modal={true} visible={thisComponent.state.displayUnsavedChangesDialog}>
                <div className={classes.generalDialog}>
                    <div className="p-3">
                        You have made edits.  If you close without saving, you will lose your changes.
                            </div>
                    <div className="dialogFooter">
                        <Button label="Close without Saving" onClick={thisComponent.props.onHide} />
                        <Button label="Cancel" onClick={thisComponent.hideUnsavedChangesDialog} />
                    </div>
                </div>
            </Dialog>

This is not working, again, because when I first open the form, dirty is already set to true. Any advice will be appreciated.

Upvotes: 1

Views: 4207

Answers (1)

kind user
kind user

Reputation: 41893

isDirty is not an action creator. It's a selector. You have to put it inside mapStateToProps and pass state as the second argument.

const mapStateToProps = (state) => ({
   isDirty: isDirty('ClientViewForm')(state),
});

Then simply initialize it in your state:

this.state = {
   isDirty: this.props.isDirty,
};

When it changes, your component will be automatically re-rendered.

Upvotes: 2

Related Questions