state-manager-utility

STATE MANAGER

Target - Front End Projects

Description

A tiny yet very powerful state management library. Follows pubsub architecture to maintain the state and broadcast the same. It can be used as an alternative to redux.

How do I get set up?

npm i state-manager-utility --save

Sample

    import React, { Component } from 'react';
    import { SubscribeToEvent, StoreEvent, TransmitToAllEvent } from 'state-manager-utility';
 
    export default class StorageTest {
        constructor(props) {
            StoreEvent({ eventName: 'test', data: { hey: 1 } });
            SubscribeToEvent({ eventName: 'test', callback: listen });
            SubscribeToEvent({ eventName: 'test', callback: listen });
 
            setTimeout(() => {
                console.log('ex');
                TransmitToAllEvent({ eventName: 'test', data: 'ghghh' });
            }, 2000);
            function listen(data) {
                console.log(data);
            }
        }
    }
 

APIs

• StoreEvent - Makes available events for listening. Adds in the list of events available for subscription

    /**
     * Event Broadcaster method
     * Event can be broadcasted without storing into state or temporarily
     * 
     * Expects eventName and data to be broadcasted
     * 
     * @param  {string} {eventName - unique identifier of event
     * @param  {any} data - to be broadcasted
     * @param  {any} objParams(optional) - extra tag to check if event is already subscribed 
     * @param  {boolean} isMemoryStore - default (false) - if set to true, events will be persisted even after current session(for this to work, initialisation of localstorage util is required)
     * @param  {boolean} isTemp - default (false) - determines if event is to be broadcasted only one time
     * @param  {boolean} dontTransmit - default (false) - event will be stored with the data but wont be broadcasted immediately after update
     */
    StoreEvent({ eventName, data, objParams, isMemoryStore = false, isTemp = false, dontTransmit= false })

• DeleteEvent - Removes event detail from the store, hence any listener wont be able getting updates

    /**
     * Removes event detail from the store, hence any listener wont be able getting updates
     * @param  {string} eventName - unique identifier of event
     * @param  {boolean} isMemoryStore - default (false) - if set to true, events will be persisted even after current session(for this to work, initialisation of localstorage util is required)
     */
    export function DeleteEvent({ eventName, isMemoryStore }) 

• SubscribeToEvent - Event listener method calls back on event creation or updation

    /**
    * @param  {string} {eventName
    * @param  {function} callback 
    * @param  {any} extraParams - carry forward as it is while calling back
    * @param  {any} objParams (optional) - extra tag for identifying event accurately
    * @param  {boolean} isMemoryStore}
    */
    SubscribeToEvent({ eventName, callback, extraParams, objParams, isMemoryStore, isTemp = false })

• UnsubscribeEvent - Removes the event listener

    /**
    * Unsubscribe event from listening 
    * @param  {string} {eventName
    * @param  {function} callback 
    * @param  {boolean} isMemoryStore 
    * @param  {any} objParams (optional) - extra tag for identifying event accurately
    */
    UnsubscribeEvent({ eventName, callback, isMemoryStore, objParams = {} })
 

• InitialiseStateManager - This method makes avilable the dependencies to the library(In this case, it expects Storage-Utility to be injected) This method can be avoided if state persistance is not required(intra session events).

/**
 * Initialize package with required dependencies
 * @param  {object} StorageUtils(optional) - GetItem, SetItem from [Storage-Utility](https://www.npmjs.com/package/storage-utility) 
 */
InitialiseStateManager({ StorageUtils })

• IsEventAvailable - Tells if an event is already subscribed. Can be used to detect if already there is a listener for given eventName

    /**
    * @param  {string} {eventName
    * @param  {boolean} isMemoryStore 
    * @param  {any} objParams (optional) - extra tag for identifying event accurately
    */
    IsEventAvailable({ eventName, isMemoryStore, objParams })

Document Author

Shubham_Kesarwani