Skip to content

fritzdultimate/StoreJs

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
 
 
 
 
 
 
 
 

Repository files navigation

StoreJs - lightweight State management lib.

Updated WIP

What is StoreJs?

StoreJs is a Javascript lightweight library for shared state management.

What do I mean by State Management?

Take for instance you're creating a project in which you used modules to divide your application into chucks, in such case, it may become hard to share data across all the modules, that is where StoreJs comes handy.

Who should use StoreJs?

everyone! Any developer who wants to implement a shared data across app.


Enough with the talk, let's dig into examples.

To use StoreJs, you will have to import storeSetup, storeSetup accepts an object which contains your data state, getters, actions, and mutations e.g

import { storeSetup } from '/store.js'

let state = () => ({
    data: {
        name: 'emeka'
    },
    age: 20
});

let getters = {
    getData: (state) => {
        return state.data;
    },
    getAge: (state) => {
        return state.age;
    }
}

let actions = {
    multiplyAge: () => {
        return {
            method: 'text',
            arguments: 'payload'
        }
    },
}

let mutations = {
    text: (state, { payload }) => {
        state.age *= payload.first;
        state.age /= payload.second;
    }
}

let store = {
  state,
  getters,
  actions,
  mutations
}

storeSetup({
    // register our state managers
    store
})

There is so much thing going on here.
-- state we create our state which holds every data we wants to be shared among our modules...

-- getters holds the property we will be using to retrieve our the data we need from the state, with getters you just get what you need from the state.

-- actions with actions, we just have commit changes to the state through mutation.

-- mutation this is where your main code goes, e.g, you need to do some checking or data manipulation.

Note

In the action, you just have to return a valid mutation property, where the key is "method" and the arguments to be passed to the method as key "arguments". e.g

  { method: mutationValidProperty, arguments: "payload" }

As you may have noticed, arguments is a string, you can only pass one argument`

Mutations accepts two parameter

  1. the state, 2. the payload variable.
Finally - Very Important.

to be able to use our getters, and actions, we will import the helper functions Asap!.

import {storeGetters, storeActions} from '/store.js'

We have imported our helpers, now we can go ahead and use them.

To use our getter helper to get data of our choice, it's straight forward, just make sure it's in our state.

let get = storeGetters({
    data: "getData",
        age: 'getAge'
    });
   console.log(get)
   // {age: 20, data: {name: "emeka"}}

We just got our age and data obj dataa from our state, so simple. Now lets commit a change to the state, by mutating the value of our age.

let obj = {
    first: 30,
    second: 2
}
storeActions({
    'multiplyAge' : obj
})

The above is how we call our action method, the key been the action method while the value is our arguments. Again, the argument mus be an object to be passed to our actions.

method: {prop: key}

which is equivalent to

function method({prop: key})

We have commited a change to our state, next we will get back our age to see if it will mutate.

 let get = storeGetters({
        age: 'getAge'
 });
 console.log(get)
 // {age: 300}

Yea It got mutated, so our state can now be get and changed.

StoreJs is aimed to make sharing data across your project a bliss,
Fork it lets't make it more powerful

!Hoolay

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published