Stateli

Stateli is a state management library borrowing concepts from Vuex but with no reliance on Vue.

• State management using Immutable
• Asynchronous actions are dispatched
• Synchronous state mutations are committed
• Can be used with a single state or modules with individual states

Installation

Install stateli with npm.

$ npm install stateli --save

Usage (javascript)

const { StateliStore } = require('stateli');

const someAction = {
  type: 'some_action_name',
  execute: (context, payload) => {
    // 1) do something
    const promise = fetch('get_some_value_from_api/' + payload);
    // 2) optionally commit to update state
    promise.then(val => {
      context.commit('some_mutation_name', val);
    });
    // 3) return a promise
    return promise;
  },
};

const someMutation = {
  type: 'some_mutation_name',
  commit: (state, payload) => {
    // We don't update the state directly but instead we create a shallow copy,
    // modify the copy and return it. Stateli will then replace the actual
    // state with the returned copy.
    const updatedState = { ...state, val: payload };
    return updatedState;
  },
};

const someGetter = {
  type: 'some_getter_name',
  getValue: state => state.val,
};

const initialState = { val: '' };

const store = new StateliStore({
  actions: [someAction],
  mutations: [someMutation],
  getters: [someGetter],
  initialState,
});

// dispatch an asynchronous action
store.dispatch('some_action_name', 'payload_value');

// commit a synchronous mutation
store.commit('some_mutation_name', 'payload_value');

// get value from getter
const val = store.getter('some_getter_name');

// access state
const val = store.state.val;

Usage (typescript)

import {
  StateliStore,
  IStateliModule,
  IStateliAction,
  IStateliMutation,
  IStateliGetter,
  IStateliContext,
} from 'stateli';

interface RootState {
  modA: ModuleAState;
}

interface ModuleAState {
  val: string;
}

const someAction: IStateliAction<RootState, ModuleAState, string> = {
  type: 'some_action_name',
  execute: (context: IStateliContext<RootState>, payload: string) => {
    // 1) do something
    const promise = fetch('get_some_value_from_api/' + payload);
    // 2) optionally commit to update state
    promise.then(val => {
      context.commit('some_mutation_name', val);
    });
    // 3) return a promise
    return promise;
  },
};

const someMutation: IStateliMutation<RootState, ModuleAState, string> = {
  type: 'some_mutation_name',
  commit: (state: ModuleAState, payload: string) => {
    const updatedState = { ...state, val: payload };
    return updatedState;
  },
};

const someGetter: IStateliGetter<ModuleAState> = {
  type: 'some_getter_name',
  getValue: (state: ModuleAState) => state.val,
};

const initialState: ModuleAState = { val: '' };
const modA: IStateliModule<RootState, ModuleAState> = {
  name: 'modA',
  state: initialState,
  actions: [someAction],
  mutations: [someMutation],
  getters: [someGetter],
};

const store = new StateliStore<RootState>({
  modules: [modA],
});

// dispatch an asynchronous action
store.dispatch('some_action_name', 'payload_value');

// commit a synchronous mutation
store.commit('some_mutation_name', 'payload_value');

// get value from getter
const val = store.getter('some_getter_name');

// access root state
const val = store.rootState.modA.val;

License

MIT