storybooks/podda

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

Homepage:

Size: 54

Language: JavaScript

GitHub Committers

UserMost Recent Commit# Commits

Other Committers

UserEmailMost Recent Commit# Commits

README

Podda

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.

TOC
Installation
install --save podda
Sample Usage

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.

Play with this example

API

Assume we've an instance of Podda called store as defined follows:

t store = new Podda();
set

Set a value. Value could be anything which can be serialize to JSON.

e.set('key', 'value');
get

Get a value by the give key.

e.get('key');
update

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)


getAll

Get all the key values pairs in the store as a map.

e.getAll();
subscribe

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.

watch

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.
watchFor

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
fire

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
registerAPI

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'));
Using with React

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.


This work is supported by the National Institutes of Health's National Center for Advancing Translational Sciences, Grant Number U24TR002306. This work is solely the responsibility of the creators and does not necessarily represent the official views of the National Institutes of Health.