Simple State Management With Vanilla JS

The current Electron Forge app I'm working on needed simple state management. I needed to know when the state would update, therefore I couldn't just use a variable or a simple object. Also, I didn't want to use proxies, so this is what I used instead.

const state = {
    name: '',
    isLoaded: false,
    counter: 0,
    setState: function(target, value) {
        this[target] = value
        stateChange(target, value)
    }
}

The above snippet shows how you can set up the state object. The most important part is that the state shouldn't be updated through its properties but rather using the state.setState() method. This way it's easy to know using the stateChange() function when the state updates.

function stateChange(target, value) {
    console.log(`😲 State of ${target} has changed to ${value}`)
    // Do something when state updates

    // For my project, I used a simple switch setup, eg.
    switch (target) {
        case 'isLoaded':
            if (value === true) {
                console.log('isLoaded switched to true 👍')
            } else {
                console.log('isLoaded is now false ğŸ‘Ž')
            }
            break;

        default:
            break;
    }
}

This is incredibly simple and can be improved upon. Not to mention that this doesn't scale well. However, for smaller projects, this can be enough.

(Even though I'm known for post-production, this is coding. However, what I'm working on is going to be very useful for retouchers. Stay tuned.) 😉