ezstore

    2.0.1 • Public • Published

    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)
     

    Install

    npm i ezstore

    DownloadsWeekly Downloads

    59

    Version

    2.0.1

    License

    ISC

    Unpacked Size

    17.3 kB

    Total Files

    9

    Last publish

    Collaborators

    • chrioyles