EZStore

whats that?

EZStore is an observable key value store implementation.

how can i use it?

npm i --save ezstore

how does it work?

import it

import EZStore from 'ezstore'

create a store

const myStore = new EZStore({
  data: {
    buttonVisible: false,
    mySlogan: "Capture the world"
  }
});

listen to changes on store keys

store.subscribe('myValue', (callBackValue) => {
    // Do whatever you want when myValue changes
    // You have access to the new value from the parameter of the callback function ( callBackValue )
})

get the value of a key in the store

store.get('myValue');

set a new value to a key in the store

store.set('buttonVisible', true);

unsubscribe

const id = store.subscribe('mySlogan', (callBackValue) => {
  console.log(callBackValue);
})

store.unsubscribe(id);

events

import EZStore from 'ezstore';
// Create the store
const store = new EZStore({
    data: {
        buttonRendered: false,
        timer: 5
    }, events: {
        changeThings: function(timerValue){
            store.set(store.keys().buttonRendered, true);
            store.set(store.keys().timer, timerValue);
        }
    }
})

store.dispatch({eventName: store.eventNames().changeThings, payload: 20})

example snippet

import EZStore from 'ezstore';
// Create the store
const store = new EZStore({
    data: {
        buttonRendered: false,
        timer: 5
    },
    events: {
        clearTimer: function({intervalId, timerSubscriptionId}){
            clearInterval(intervalId);
            store.set('timer', '');
            store.unsubscribe(timerSubscriptionId);
        }
    }
})

// Create a button
let myButton = document.createElement('button');
myButton.id = "myButton";

// Create a timer
let timer = document.createElement('div');
timer.innerHTML = store.get('timer');
document.body.appendChild(timer);

// Listen to buttonRendered changes in store

store.subscribe('buttonRendered', (value) => {
    if(value === true) {
        document.body.appendChild(myButton);
    }
})

// Listen to timer changes in store
const timerSubscriptionId = store.subscribe('timer', (value) => {
    timer.innerHTML = value;
})

// Init a counter that counts from 5 to 0 and renders a button afterwards
const counter = setInterval(() => {
    store.set('timer', (store.get('timer') -1 ))
    if(store.get('timer', 0)){
        store.dispatch({
            eventName: store.eventNames().clearTimer, 
            payload: {intervalId: counter, timerSubscriptionId}
        });
        store.set('buttonRendered', true);
    }
}, 1000)