Repository files navigation

An ambitiously tiny, gizp ~800b, flux-like progressive state management library inpired by Redux and Vuex.

• Flux pattern
• Immutable state
• Action Mutators
• Computed state
• Subscription

Inspired by Redux and Vuex,Litestate removes the boilerplate to keep your state simple, intuitive and immutable.

It follows the flux pattern and let you change your state only via Action Mutators.

Litestate is framework agnostic, and can work with React, Vuejs etc.

Litestate allows you to mutate your state in place without the need for reducers like Redux or actions and mutations like Vuex.

Litestate allows you to writecomputed state, which are functions that select part of your state, to return a new value that will be set in your state.

Litestate also provides a subscription method to watch the state

The best way to importLitestate is via ESM JavaScript, where we specify the type as module, and we import it fromunpkg.com

Make suretype="module" exists in the script tag.

<scripttype="module">importLitestatefrom'//unpkg.com/litestate';    ...</script>

Or by installing in your project

npm install litestate

importLitestatefrom'litestate';

<scripttype="module">importLitestatefrom'//unpkg.com/litestate';conststore=Litestate({state:{firstName:'',lastName:'',count:0,/** Computed state: function that returns a new value to the state **/fullName(state){return`${state.firstName}${state.lastName}`},},/** Action Mutators: functions to update the state **/setFirstName(state,firstName){state.firstName=firstName;},setLastName(state,lastName){state.lastName=lastName;},// Async exampleasyncmakeAjaxCall(state,url){state.pending=true;// The state will be mutatedstate.data=awaitfetch(url);state.pending=false;// The state will be mutated},// Other action mutatorsinc(state)=>state.count++,dec(state)=>state.count--,});</script>

State are the values that can be initially set, or set via an action mutator.

Initial state can be set during initialization of the store, in thestate property.

Thestate property is an object that may contains: String, Number, Array, Plain Object, Boolean, Null, Undefined.

If the value of a state property is a function it will be converted into a computed state (read more below)

conststore=Litestate({state:{name:'Litestate',version:'1.x.x',firstName:'',lastName:'',count:0,}})

You can access the full state with the methodLitestate.$state() or by using any state properties.

// get full state objectconstmyFullState=store.$state();// or individual propertyconstname=store.name;constversion=store.version;

Action mutators are functions that can mutate the state in place. They accept the currentstate as the first argument and can return any values.

Action mutators are set during initialization of the store.

[v.0.12] Action mutators can also call other actions by usingthis.

conststore=Litestate({setFirstName(state,firstName){state.firstName=firstName;},setLastName(state,lastName){state.lastName=lastName;},// Async exampleasyncmakeAjaxCall(state,url){state.pending=true;// The state will be mutatedstate.data=awaitfetch(url);state.pending=false;// The state will be mutated},// Other action mutatorsinc(state)=>state.count++,dec(state)=>state.count--,// This action will call other actionsasynccallMe(state){this.inc();awaitthis.makeAjaxCall();}})

Run an action mutator by using the function name

store.setFirstName('Mardix');store.setLastName('M.');store.inc();// will increment the countstore.dec();// will decrement the countstore.callMe();// will call other actions

Computed State are function that select part of the state to create new properties.They are function defined along with the initial state.The selected value will be assigned to the function's name

conststore=Litestate({state:{firstName:'',lastName:'',count:0,/** Computed state: function that returns a new value to the state **/fullName(state){return`${state.firstName}${state.lastName}`},},  ...});

A new propertyfullName will be assigned to the state and will contain the returned value.

The same way you would access the initial state, computed states are accessed the same way, by calling the property.

constfullName=store.fullName;

You can subscribe to changes in the state. Each time the state is updated it will run a function that you set.

Litestate.$subscribe(listener:function)

constunsub=store.$subscribe(state=>{console.log(`I'm updated${state.count}`);});

To unsubscribe

constunsub=store.$subscribe(state=>{console.log(`I'm updated${state.count}`);});// This will unsubscribeunsub();

Litestate() : Initialize the state management

Litestate.$state() : returns the state

Litestate.$subscribe(listener:function) : subscribe a function to the changes

LICENSE: MIT

(c) 2019 Mardix