Problem:

• i want to use more OOP approach, and changing an object via methods. e.g something like snackbar.close()
• i have snackbar as an object of appState
• i have methods inside snackbar object that change the values

export interface Snackbar {
    isOpen: boolean;
	    message: string;
    severity?: string;
    set: (isOpen: boolean, message: string, severity?: TSeverity) => void;
    close: () => void;
}

const initialAppState: appState = {
    alert: null,
    currentUser: null,
    modal: {
        open: false,
        content: null,
        requiresLoggedIn: false,
    },
    snackbar: {
        isOpen: false,
        message: '',
        severity: 'success',
        set: function (isOpen: boolean, message = 'default message', severity = 'info') {
            console.log('inside set snackbar', this.isOpen);
            this.isOpen = isOpen;
            this.message = message;
            this.severity = severity;
        },
        close: function () {
            this.isOpen = false;
            this.message = '';
            console.log('inside close function', this.isOpen)
        },
    },
};

• ⇒ using this approach, the values of snackbar object can be change, but will not trigger state update for UI. ⇒ need to dispatch action for state update
• clicking on favorite button will update UI since it’s updating its own state, therefore also triggers repainting the whole screen (inlcuding snackbar)
• but onClose doesnt work because of the above reason

⇒ cannot this approach