js-state-manager v1.0.9

js-state-manager

A tiny Javascript State manager Library writtern using Typescript. This library is more appropriate to use in a smaller micro forntend project.

This is a project i have intially created to know how to build a small state mangement application. This has a very minimlal operation and does helps when we are building and sharing micro forntend architucture.

Demo-Preview

The about gif is from the the demo project build using this package package one with Array type and other with simple object type. checkout this example project for more information on how it works

https://github.com/pravanjan/js-state-example

Table of contents

• Project Title
• Demo-Preview
• Table of contents
• Installation
• Usage
• Development
• Contribute
  • Sponsor
  • Adding new features or fixing bugs
• License
• Footer

Installation

(Back to top)

   npm i js-state-manager
   npm i -D js-state-manager  //for dev dependency

Usage

Step 1 : import StoreManager from the library

    import  {StoreManager } from "js-state-manager"

/* Create instance of StoreManager instance */
    const storeManager = StoreManager.getInstance();
/* Now supply your state to observe changes. */

    let store = {
    name:"userStore",
    state:[], // for very first time i have it empty.
 }
const userStore = storeManager.createStore(store);

/* Subscribe the  method so that it change when the array object changes */
userStore.subscribe(your function);

Step 2: Then define your action for state array. Every time we call this action it automatically call the subscribe render method.

    const AddNew = (state , payload)=>{
                   state.push(payload);
                   return state;
                }

call and dispatch the action when your user clicked add user button.

   userStore.dispatch(AddNew,{user object goes here});

(Back to top)

Development

(Back to top)

Contribute

(Back to top)

Sponsor

(Back to top)

Adding new features or fixing bugs

(Back to top)

License

(Back to top)

Footer

(Back to top)

Leave a star in GitHub, give a clap in Medium and share this guide if you found this helpful.