In my web application, I want to prompt user when he/she tries to close the browser/tab based upon Redux state using event handlers.

I am using the below code to prompt user before exiting based upon 'isLeaving' state. 

```
function mapStateToProps(state) {
    const {isLeaving} = state.app.getIn(['abc']);
    return {
        isLeaving
    };
}

@connect(mapStateToProps, {}, undefined, {withRef: true})
export default class MyClass extends React.component {
    @autobind
    stayOnPage(event) {
        if (this.props.isLeaving) {
            const message = 'Are you sure you want to leave';
            event.returnValue = message;
            return message;
        }
        return false;
    }

    componentDidMount() {
        window.addEventListener('beforeunload', (event) => {
            this.stayOnPage(event);
        });
    }

    componentWillUnmount() {
        window.removeEventListener('beforeunload', (event) => {
            this.stayOnPage(event);
        });
    }

    componentWillReceiveProps(nextProps) {
        if (this.props.prop1 !== nextProps.prop2) {
           // do something
        }
    }

    render() {
       //
    }
}

```

This code works fine. But whenever there is a change in prop1, I see that this.props.isLeaving does not have updated value. 

Can somebody help? What is I'm doing wrong here?