PicoStore is a small and fast state management container for JavaScript apps.
Features:
- tiny (<1KB minified)
- no dependencies
- single atomic state object
- modular: all functionality added in modules to aid separation of concerns and portability
- computed properties
- subscribe to changes in specific properties in the state object
$ npm install picostore --save
import createStore from 'picostore';
const config = {
counter: {
actions: {
up: value => state => ({ count: state.count + value }),
down: value => state => ({ count: state.count - value })
},
state: {
count: 0
}
}
};
const store = createStore(config);
store.actions.counter.up(1);
console.log(store.state.count); // 1
Actions don't have to return a segment of the state, they can be used to fire asynchronous actions, or do anything else you want. If you later want to update the state synchronously, you must call another action:
const config = {
counter: {
actions: {
get: () => ({ actions }) => new Promise((resolve) => {
actions.set(1);
resolve();
}),
set: value => state => ({ count: value });
},
state: {
count: 0;
}
}
}
const store = createStore(config);
store.actions.getCount();
console.log(1);
// outputs:
// 1
// 2
Add computed properties by specifying dependencies up front. Computed functions are memoized so they are exceedingly fast.
const config = {
counter: {
actions: {
up: value => state => ({ count: state.count + value }),
down: value => state => ({ count: state.count - value }),
},
computed: {
total: ['count', 'initial', (state) => state.count + state.initial],
}
state: {
count: 0,
initial: 5,
}
}
};
const store = createStore(config);
store.actions.counter.up(1)
console.log(store.state.counter.total); // 6
Subscribe to nested properties by specifying their paths in dot notation. You can also subscribe to computed properties.
let count, total;
const config = {
counter: {
actions: {
up: value => state => ({ count: state.count + value }),
},
computed: {
total: ['count', 'initial', (state) => state.count + state.initial],
}
state: {
count: 0,
initial: 5,
},
subscriptions: {
count: (newVal) => { count = newVal; }
total: (newVal) => { total = newVal; } // subscribe to computed properties too
}
}
};
const store = createStore(config);
store.actions.counter.up(1);
console.log(count, total); // 1, 6