Kel
A dead simple, event driven state management library for Vanilla JS apps.
Initialize the global store
const initialStore = {};
const store = Kel(initialStore);
Subscribe to an event
store.on(eventName, (store) => {
// do something
});
Emit an event
store.emit(eventName, (store) => {
// do something and return the updated store
});
Counter Example
const store = Kel({ count: 0 });
const COUNT_CHANGE = "countChange";
store.on(COUNT_CHANGE, ({ count }) => {
document.querySelectorAll("span.counter-value")[0].textContent = count;
});
document.getElementById("inc").addEventListener("click", function () {
store.emit(COUNT_CHANGE, ({ count }) => ({ count: count + 1 }));
});
document.getElementById("dec").addEventListener("click", function () {
store.emit(COUNT_CHANGE, ({ count }) => ({ count: count - 1 }));
});