Name: podda
Owner: Storybook
Description: Deprecated - for bug fixes and maintenance only
Forked from: arunoda/podda
Created: 2018-02-20 00:31:42.0
Updated: 2018-02-20 00:50:28.0
Pushed: 2018-02-20 00:46:53.0
Size: 54
Language: JavaScript
GitHub Committers
User | Most Recent Commit | # Commits |
---|
Other Committers
User | Most Recent Commit | # Commits |
---|
Simple Reactive DataStore for JavaScript.
This is a pure JavaScript in-memory key value store for your Single Page App.(SPA) You can think this as a simple key value store with an event emitter.
This works pretty well with React (as an simple substitute for Redux/MobX), but works with anything in JavaScript.
install --save podda
Let's subscribe to the data store and set an item.
rt Podda from 'podda';
t defaults = { 'race': 'Human' };
t store = new Podda(defaults);
ubscribe for changes
t stopSubscription = store.subscribe((data) => {
nsole.log('Data:', data);
et some items.
e.set('name', 'Arunoda'); // logs => Data: { name: 'Arunoda' }
e.set('age', 99); // logs => Data: { name: 'Arunoda', age: 99 }
top the subscription
Subscription();
e.set('city', 'Colombo'); // logs nothing.
Assume we've an instance of Podda called store as defined follows:
t store = new Podda();
Set a value. Value could be anything which can be serialize to JSON.
e.set('key', 'value');
Get a value by the give key.
e.get('key');
Update multiple entries of the store at once. While updating, you could accept the current state of the store as well.
e.update(function(state) {
turn {
newField: 10,
existingField: !Boolean(existingField)
Get all the key values pairs in the store as a map.
e.getAll();
Subscribe for the store and get an snapshot of the data of the whole store. Registered callback will be fired for everything you set something to the store.
t stop = store.subscribe((data) => {
nsole.log('Data:', data);
top the subscription when needed
();
Call to this method return a function where you can use that to stop the subscription.
Very similar to subscribe but watch a given key instead of the all keys.
t stop = store.watch('name', (name) => {
nsole.log('Name is:', name);
e.set('name', 'Arunoda'); // logs => Name is: Arunoda
e.set('age', 99); // logs nothing.
Very similar to watch but watch for the value of the key as well.
t stop = store.watchFor('name', 'Arunoda', (name) => {
nsole.log('Name is:', name);
e.set('name', 'Arunoda'); // logs => Name is: Arunoda
e.set('name', 'Matt'); // logs nothing
This will be pretty useful with the watch
and watchFor
APIs. You could simply fire those callback, without setting an item to the store. Hence, this has no effect on the subscribe
.
t stop = store.watch('name', (name) => {
nsole.log('Name is:', name);
e.set('name', 'Arunoda'); // logs => Name is: Arunoda
e.fire('name', 'Matt'); // logs => Name is: Matt
ole.log(store.get('name')) // logs => Arunoda
With this, you'll be able to add new features to the store. For an example, let's say we are using toggle functionality in our store a lot. So, we can add an API for that like this:
e.registerAPI('toggle', (store, key) => {
ore.set(key, !store.get(key));
turn store.get(key);
hen we can use it like this:
ole.log('Toggled value for lights is:', store.toggle('lights'));
In order to use this with React, you need to get help from a data container. React Komposer is an ideal tool for that.
Have a look at this example app.