README

Welcome to Taihou!

Small state manager written in Typescript

🏠 Homepage

Install

npm i @atsu/taihou

Usage

First of all, there is two concepts to know:

Sections: A section is the core of the Store, it has three properties state, actions and processes.

After you define the state, you can define all possible actions that will commit your new state to the section on actions. And if you have an async operation, you could define it in processes.
Immutability: A user would never have to modify the state directly but instead provide your new state to the store to handle it, so a created section will expose commit and process. These will call the specified action or process function and update the state accordingly.

A thing to note here is that we want to provide the new state to the section, so please return a new object with the new state.

import { createSection } from "@atsu/taihou";

const taihou = createSection({
    state: {
      list: [ 0 ],   // Default value
    },
    actions: {
      set: (payload, state) => ({ list: [...state.list, ...payload] }),
    },
    processes: {
      setAsync: async (payload, { state, commit, process }) => {
          const newList = await doSomethingAsyncWithPromises(payload) 
          
          return { list: [...state.list, ...newList] },
      }
    }
  });

After creation you can use the section with:

taihou.state.list // value: [ 0 ]

// Update the taihou section synchronously. 
// Also TS should infer your defined function names so no mistakes for the name
taihou.actions.commit("set", [ 1, 2 ])   

taihou.state.list // value [ 0, 1, 2 ] 

// Update the taihou section asynchronously. 
const setAsync: Promise<number[]> = taihou.actions.process("setAsync", [ 3, 4 ])

taihou.state.list // value [ 0, 1, 2 ] - Value is not updated immediately

setAsync.then(newState=> {
  console.log(newState);  // value [ 0, 1, 2, 3, 4 ] 
});

Store: A store by createStore is nothing else than a wrapper for your sections, it provides a single store object that would be your State manager and also useStore that is a wrapper function to use on components (e.g. Vue3's DefineComponent), it is intended to have more features for it in the future.


const {store, useStore} = createStore({
 taihou: createSection({ /* section definition */}),
 azuma: createSection({ /* section definition */}),
 atago: createSection({ /* section definition */}),
});

useStore(store => {
  // here the store reference is available 
})

// In Vue 3
useStore(store => defineComponent({
  mounted(){
    console.log(store.taihou);   // here the store reference is available 
  }
}))

Author

👤 Tsukugi

Github: @Tsukugi

🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues page.

Show your support

Give a ⭐️ if this project helped you!

Usage no npm install needed!