State management for your vanilla JS apps 📫
View a demo here: https://samuelhornsey.github.io/js-stateful/demo/
Installing using npm
npm install js-stateful
import as module.
import Store from 'js-stateful'
Setting up and creating the store
import Store from 'js-stateful'
// Initial state
const state = {
items: []
}
// Create an object containing mutations
const mutations = {
ADD_ITEM: (state, action) => {
state.items.push(action.item);
return state;
}
};
// Init the store
const store = new Store({ state, mutations, debug: true });
You can pass in a onChange handler. Everytime the state is changed this handler will be called.
store.onChange(state => {
console.log(state);
});
To modify the state use an action. These will call a specific mutation. The dispatch function on the store will create and commit the action.
// Create an action function
const addItem = item => {
return { type: "ADD_ITEM", item };
};
store.dispatch(addItem({ title: 'Hello, World' }));
To read the current state of the store simple use it like an other object.
console.log(store.state);