State management patterns in vanilla JavaScript

Question

I am trying to manage state in vanilla JavaScript—without using frameworks like React or Vue. I am also not using state management libraries.

My requirements are:

Reactivity
Time Travel (Undo/Redo)
Testing and Debugging should be easy
Single Source of Truth: Maintain state in one central location
Immutable Updates: Create new objects instead of mutating existing ones
Separation of Concerns: Keep state management separate from UI code
Performance: Only update what's necessary when state changes

Currently I am considering Flux-like Pattern and Redux-like Pattern.

But can not make up my mind as i am not sure if there is a better solution than this.

Here is an implementation I have worked on.

// Import Immutable
const { Map } = require('immutable');

// --- Store Implementation ---
function createStore(reducer, initialState) {
    let currentState = initialState;
    let listeners = [];
    let undoStack = [];
    let redoStack = [];

    function getState() {
        return currentState;
    }

    function dispatch(action) {
        const nextState = reducer(currentState, action);

        if (!nextState.equals(currentState)) {
            undoStack.push(currentState);
            redoStack = [];
            currentState = nextState;
            listeners.forEach(fn => fn(currentState));
        }
    }

    function subscribe(fn) {
        listeners.push(fn);
        return () => {
            listeners = listeners.filter(l => l !== fn);
        };
    }

    function undo() {
        if (undoStack.length > 0) {
            redoStack.push(currentState);
            currentState = undoStack.pop();
            listeners.forEach(fn => fn(currentState));
        }
    }

    function redo() {
        if (redoStack.length > 0) {
            undoStack.push(currentState);
            currentState = redoStack.pop();
            listeners.forEach(fn => fn(currentState));
        }
    }

    return { getState, dispatch, subscribe, undo, redo };
}

// --- Reducer Function ---
function counterReducer(state, action) {
    switch (action.type) {
        case 'INCREMENT':
            return state.update('count', c => c + 1);
        case 'DECREMENT':
            return state.update('count', c => c - 1);
        default:
            return state;
    }
}

// --- Setup Store ---
const initialState = Map({ count: 0 });
const store = createStore(counterReducer, initialState);

// --- Subscribe to state changes ---
store.subscribe(state => {
    console.log("▶ State:", state.toJS());
});

// --- Sample Usage ---
store.dispatch({ type: 'INCREMENT' }); // { count: 1 }
store.dispatch({ type: 'INCREMENT' }); // { count: 2 }
store.dispatch({ type: 'INCREMENT' }); // { count: 3 }
store.dispatch({ type: 'INCREMENT' }); // { count: 4 }
// store.dispatch({ type: 'DECREMENT' }); // { count: 3 }

store.undo(); // { count: 3 }
store.undo(); // { count: 2 }
store.undo(); // { count: 1 }
store.undo(); // { count: 0 }

store.redo(); // { count: 1 }
store.redo(); // { count: 2 }
store.redo(); // { count: 3 }
store.redo(); // { count: 4 }

store.dispatch({ type: 'DECREMENT' }); // { count: 3 }
store.dispatch({ type: 'INCREMENT' }); // { count: 4 }

store.undo(); // { count: 3 }
store.undo(); // { count: 4 }
store.undo(); // { count: 3 }
store.undo(); // { count: 2 }
store.undo(); // { count: 1 }

I think (not sure about this) that functional approach is better for manual state management. Please give me your opinion regarding this.

For being functional, I am already using immutable.js. Is there any other lightweight libraries (like sanctuary, daggy, lodash, ramda) I should use? Can RxJS help?

This is the boilerplate, on which i am willing to develop my next application.

please let me know how I can improve on this.

Are you sure you want to build your own delivery trucks? Because that's what you doing here. In general, my opinion is that unless you are in the business of selling and maintaining delivery trucks, you should focus on what your business is actually selling and contract your trucks from a 3rd party. There are advantages of using 3rd party libraries that someone else maintains/supports. — ControlAltDel
– ControlAltDel, Commented May 20 at 15:39
I have noticed that people are using Proxy to create observable variables. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — Kokodoko
– Kokodoko, Commented May 26 at 14:59

PizzaOverflow · Accepted Answer · 2025-06-04 09:31:57Z

I'll give you my thoughts. I don't say this is THE answer on your questions.

Tips for your library:

A good library is Immer.js. It's similar in purpose as Immutable.js, but you update the state as if it were a regular JavaScript object/array/...
Your code looks good. You could take a look at the Redux.js library source code. It's the smallest library I've ever seen, so it won't take long. I like this more, since the Redux.js source code is small, but still in multiple files.

Advise for your next application

If you don't use a web framework, I think a state management framework will be more difficult than none. The goal of the React and Vue frameworks is to do the updates based on state in the HTML instead of the programmer. It calculates for you which parts have to update. If you don't have a framework, you will have to manage yourself which action triggers which state update and afterwards which parts of HTML have to change. You better don't overseparate and overgenerify your state updates. It will be easier an action and the corresponding state changes and HTML updates are connected to one another.

If you would use a web framework, I would advise you to use an existing library. I had some dreams of creating application with my own state libraries in the past. I ended up wasting a lot of time and my dreams were never realised. Redux has helper libraries and browser plugins for: connection to React.js, dev tools, connection to hot reload,... Creating such a library is good for learning. But I learned you have to focus on what you want to build with the least possible extra's.

user291855 · Accepted Answer · 2025-06-05 15:04:17Z

Early exits from store's functions reduce indentation:

function createStore(reducer, initialState) {
    let currentState = initialState;
    let listeners = [];
    let undoStack = [];
    let redoStack = [];

    function getState() { return currentState; }

    function dispatch(action) {
        const nextState = reducer(currentState, action);

        if (nextState.equals(currentState)) { return; }

        undoStack.push(currentState);
        redoStack = [];
        currentState = nextState;
        listeners.forEach(fn => fn(currentState));
    }

    function subscribe(fn) {
        listeners.push(fn);
        return () => {
            listeners = listeners.filter(l => l !== fn);
        };
    }

    function undo() {
        if (undoStack.length < 1) { return; }

        redoStack.push(currentState);
        currentState = undoStack.pop();
        listeners.forEach(fn => fn(currentState));
    }

    function redo() {
        if (redoStack.length < 1) { return; }

        undoStack.push(currentState);
        currentState = redoStack.pop();
        listeners.forEach(fn => fn(currentState));
    }

    return { getState, dispatch, subscribe, undo, redo };
}

Maybe unsubscribe from the store once state management is no longer needed, though this code snippet might be out of scope for the review:

let unsubscribe = store.subscribe(state => {
    console.log("▶ State:", state.toJS());
});

// --- Sample Usage ---
store.dispatch({ type: 'INCREMENT' }); // { count: 1 }
store.dispatch({ type: 'INCREMENT' }); // { count: 2 }
store.dispatch({ type: 'INCREMENT' }); // { count: 3 }
store.dispatch({ type: 'INCREMENT' }); // { count: 4 }
// store.dispatch({ type: 'DECREMENT' }); // { count: 3 }

store.undo(); // { count: 3 }
store.undo(); // { count: 2 }
store.undo(); // { count: 1 }
store.undo(); // { count: 0 }

store.redo(); // { count: 1 }
store.redo(); // { count: 2 }
store.redo(); // { count: 3 }
store.redo(); // { count: 4 }

store.dispatch({ type: 'DECREMENT' }); // { count: 3 }
store.dispatch({ type: 'INCREMENT' }); // { count: 4 }

store.undo(); // { count: 3 }
store.undo(); // { count: 4 }
store.undo(); // { count: 3 }
store.undo(); // { count: 2 }
store.undo(); // { count: 1 }

unsubscribe();

Stack Exchange Network

State management patterns in vanilla JavaScript

2 Answers 2

You must log in to answer this question.

Hot Network Questions

State management patterns in vanilla JavaScript

2 Answers 2

You must log in to answer this question.

Related

Hot Network Questions