@abasb75/state-manager

@abasb75/state-manager

@abasb75/state-manager is a great and best state manager tools for your javascript web applications.

• sync data between opened browser tabs when updating state.
• save data on localstorage
• great type hint for state or defined action

installation

npm i @abasb75/state-manager --save

Quick Start:

• Create initial value for passing to store's object:

interface StateType {
    darkMode:boolean;
    counter:number;
    notes:{
        text:string;
        date:number;
    }[];
}

const initialState:StateType = {
    darkMode:false,
    counter:0,
    notes:[],
}

• Define your actions:

const actions = {
    toggleDarkMode:(state:StateType)=>{
        return {
            ...state,
            darkMode:!state.darkMode,
        };
    },
    counter:{
        increment:(state:StateType)=>{
            return {
                ...state,
                counter:state.counter+1,
            }
        },
        decrement:(state:StateType)=>{
            return {
                ...state,
                counter:state.counter-1,
            }
        },
    },
    notes:{
        add:(state:StateType,text:string):StateType=>{
            console.log('add worked!')
            return {
                ...state,
                notes:[
                    ...state.notes,
                    {
                        text:text,
                        date:Date.now(),
                    }
                ]
            }
        },
        delete:(state:StateType,id:number):StateType=>{
            return {
                ...state,
                notes:state.notes.filter(n=>n.date!==id),
            }
        },
    }
}

• Create your store:

import { createStore } from "@abasb75/state-manager";

...

const initialState:StateType = {
    ...
}


const actions = {
    ...
}

const store = createStore({
    initialState,
    actions,
    storgable:true, // if storagble sets true, states saved on localstorage
    storageKey:'mystorage',
});

export default store;

• import store everywhere you neeed it:

import store from './store';

• get state data with get method:

const state = store.get(); //return state

...

const state = store.get(state=>state.counter); //return counter value 

• update state properties value with set method:

store.set({
  counter:0;
}).then(state=>{
  console.log(state.counter);
});

• update state value with defiened actions:

store.getActions().counter.increment();

• For subscribe state changes:

const unsubscribe = (state)=>{
    console.log(state);
}

// subscribe return itself unsubscribe
unsubscribe();

// alternative for get subscriber:
const subscribeId = store.addSubscriber((state)=>{
    console.log(state);
});

// and  unsubscribe with subscribeId:
store.unsubscribe(subscribeId);

Rect

@abasb75/react-state-manager is an extention to use this package in react.

Examples:

Simple Note App