Little State Machine
React hooks for persist state management based.
✨ Features
- Follow flux application architecture
- Tiny with 0 dependency and simple (less 1kb)
- Persist state by default (
sessionStorage
) - Build with React Hooks
? Installation
$ npm install little-state-machine
API
? StateMachineProvider
This is a Provider Component to wrapper around your entire app in order to create context.
? createStore
createStore(store, {
name: string; // rename the store
middleWares?: Function[]; // function to invoke each action
syncStores?: // sync with external store in your session/local storage˚
| Record<string, string[]>
| { name: string; transform: Function } // name of the external store, and state to sync
| undefined;
}})
Function to initial the global store, call at app root where StateMachineProvider
is.
? useStateMachine(Action | Actions, Options?) =>
This hook function will return action/actions and state of the app.
⚒ DevTool
Built-in DevTool component to track your state change and action.
![](https://github.com/bluebill1049/little-state-machine/blob/master/docs/DevToolScreen.png?raw=true)
? Example
? app.js
? yourComponent.js
? yourDetail.js
? action.js
? Window Object
? window.STATE_MACHINE_DEBUG
This will toggle the console output in dev tool.
window.STATE_MACHINE_DEBUG(true)
to turn debug on in console
window.STATE_MACHINE_DEBUG(false)
to turn off debug on in console
![](https://github.com/bluebill1049/little-state-machine/blob/master/docs/devtool.png?raw=true)
? window.STATE_MACHINE_RESET
This will reset the entire store.
window.STATE_MACHINE_RESET()
to reset the localStorage or sessionStorage
? window.STATE_MACHINE_GET_STORE
This will return the entire store.
window.STATE_MACHINE_GET_STORE()
? window.STATE_MACHINE_SAVE_TO
Save into another session/local storage
window.STATE_MACHINE_GET_STORE(name: string)
? window.STATE_MACHINE_LOAD
Load saved state into your app, you can either supply a name of your session/local storage, or supply a string of data.
window.STATE_MACHINE_GET_STORE({ storeName?: string, data?: Object })
storeName
: external session/local storage name
data
: string of data