State Pilot - a library designed to simplify state management in your JavaScript or TypeScript applications. With State Pilot, you can manage an application's lifecycle state, subscribe to changes in your data stores, and trigger custom named actions.
The aim of this open source project is to create a highly flexible and reliable state management tool that delivers an intuitive interface for integration and ease of use. Contributions are welcome to this project.
build the ts file
npm run build
test the code
npm run test
Adding State Pilot into your application
import { StatePilot } from 'state-pilot';
Create a new store inside your application.
// @param string stateStoreName declare a name for your store
// @param boolean useHistory (optional | defaults to false) will keep record of changes
// @returns new store
statePilot.createStore(stateStoreName, useHistory);
Add a new state to a store.
// @params string stateStoreName store
// @params object state data
// @returns new store state
statePilot.createStoreState(stateStoreName, state);
Get a stores most recent state.
// @returns currrent store state
statePilot.getStoreState();
get a stores state history from a range of past events.
// @params string stateStoreName
// @params number startIndex
// @params number lastIndex
// @returns store state history from range
statePilot.getStoreStateHistory(stateStoreName, startIndex, lastIndex);
get a stores entire state history.
// @params string stateStoreName
// @returns all store state history
statePilot.getAllStoreStateHistory(stateStoreName);
import all stores (from a previously exported store).
// @params object store provide a valid store object from previous session
// @returns object store
statePilot.importStore(store);
export all stores.
// @returns object store
statePilot.exportStore();
subscribe to a store.
const unSubUserSettings = statePilot.subscribe('userSettings', data => console.log('user settings store updated', data));
// triggered event will be caught by the subscribers call back
statePilot.createStoreState('userSettings', { darkMode: true, lang: 'en-us' });
subscribe to a store and read from action data.
statePilot.triggerStoreAction.SET_DARK_MODE(true);
// action data can be found within the actionData of a call back
const unSubUserSettings = statePilot.subscribe('userSettings', (state) => {
if(state.storeAction === "SET_DARK_MODE") console.log(state.actionData)
});
create store action to provide for more descriptive state change triggers.
// @params string name unique name of the action e.g. "DARK_MODE_TOGGLE"
// @params string store store to update
// @params string subStoreKey points to the sub state key you wish to update e.g. store['darkMode']
// @params Function fn this is the custom function logic applied e.g. function(s) { return !s } will reverse a booleans the state
// @params boolean isAsync if the call back fn is async or not
// @returns void
statePilot.createStoreAction(name, store, subStoreKey, fn, isAsync);
create store actions as an array.
// @params string name unique name of the action e.g. "DARK_MODE_TOGGLE"
// @params string store store to update
// @params string subStoreKey points to the sub state key you wish to update e.g. store['darkMode']
// @params Function fn this is the custom function logic applied e.g. function(s) { return !s } will reverse a booleans the state
// @params boolean isAsync if the call back fn is async or not
// @returns void
statePilot.createStoreActions(
[
{
name
store
subStoreKey
fn
isAsync
}
]
);
unsubscribe from a store subscription variable instance.
// @description unsubscribe from single subscription
unSubUserSettings();
unsubscribe from an entire store.
// @description unsubscribe all subscribers from a store
statePilot.unsubscribe('userSettings');
example use of library
import { StatePilot } from 'state-pilot';
// create new instance of statePilot
const statePilot = new statePilot();
// create stores
statePilot.createStore('userSettings', true);
statePilot.createStore('viewNavigation', true);
// add a view state
statePilot.createStoreState('viewNavigation', { path: '/home', name: 'home' });
// add a user settings state
statePilot.createStoreState('userSettings', { darkMode: true });
// create a store action
statePilot.createStoreAction('TOGGLE_DARK_MODE', 'userSettings', 'darkMode', function(s) { return !s });
// add some subscriptions to listen for changes
const unSubscribeUserSettings = statePilot.unsubscribe('userSettings', data => { /* do something with data */ });
const unSubscribeVieNavigation = statePilot.unsubscribe('viewNavigation', data => { /* do something with data */ }););
// invoke state changes to be recieved by subscribers
statePilot.createStoreState('viewNavigation', { path: '/contact', name: 'contact' });
// invoke state change via triggerStoreAction to be recieved by subscribers
statePilot.triggerStoreAction.TOGGLE_DARK_MODE(statePilot.getStoreState('userSettings').darkMode);