Deadly-simple-state NPM

✋Deprecated!!!

This project has been renamed to final-state and managed in a github organization.

Please move to https://github.com/final-state/final-state

For npm packages, please see: https://www.npmjs.com/package/final-state

deadly-simple-state

A lightweight state management tool for javascript/typescript.

Installation

yarn add deadly-simple-state
# or
npm install deadly-simple-state

Basic Example

import Store from 'deadly-simple-state';

// Define initial state
const initialState = {
  a: 1,
  b: 'good',
};

// Create store instance
const store = new Store(initialState);

// Print state
console.log('INITIAL STATE:', store.getState());

// Define a listener to listen the changes of state
function listener() {
  // Print state
  console.log('IN SUBSCRIBE LISTENER:', store.getState());
}

// Subscribe the changes of state
store.subscribe(listener);

// Define an action to alter state
function incrementAction(draftState) {
  draftState.a = draftState.a + 1;
}

// Dispatch action
store.dispatch(incrementAction);

// Print state
console.log('CURRENT STATE:', store.getState());

store.unSubscribe(listener);

/* Output will be:
INITIAL STATE: Object {a: 1, b: "good"}
IN SUBSCRIBE LISTENER: Object {a: 2, b: "good"}
CURRENT STATE: Object {a: 2, b: "good"}
*/

API Reference

new Store(initialState)

Create a store instance by passing in the initial state of your app.

Store#getState()

Get the latest state object. Keep in mind that you shouldn't mutate the state object directly. It will not take effect until next Store#dispatch and may cause your app broken.

Store#subscribe(listener)

Subscribe the changes of state. Once the state are changed by Store#dispatch, the listener will be called. The listener is a function with no arguments, without respect to the return value. You can call Store#getState in listener to get the latest state.

Store#unSubscribe(listener)

Unsubscribe a listener. The listener should exactly be same with the one passed to Store#subscribe.

Store#dispatch(action, actionParams)

Dispatch an action to alter state. Each time dispatch is called, all the listeners registered by Store#subscribe will be called. The action is a special callback function with the following signature:

(draftState[, actionParams]) => {
  // To mutate draftState directly!
  // No need to return anything!
  // Changes will be merged into real state object immutably.
}

It's inner implementation is:

// pseudocode
import { produce } from 'immer';
produce(state, action);

Use with `typescript`

import Store, { Action } from 'deadly-simple-state';

// Define state shape
interface State {
  a: number;
  b: string;
}

// Define initial state
const initialState: State = {
  a: 1,
  b: 'good',
};

// Create store instance
const store = new Store<State>(initialState);

// Print state
console.log('INITIAL STATE:', store.getState());

// Define a listener to listen the changes of state
function listener() {
  // Print state
  console.log('IN SUBSCRIBE LISTENER:', store.getState());
}

// Subscribe the changes of state
store.subscribe(listener);

// Define an action to alter state
const incrementAction: Action<State> = (draftState) => {
  draftState.a = draftState.a + 1;
}

// Dispatch action
store.dispatch(incrementAction);

// Print state
console.log('CURRENT STATE:', store.getState());

store.unSubscribe(listener);

/* Output will be:
INITIAL STATE: Object {a: 1, b: "good"}
IN SUBSCRIBE LISTENER: Object {a: 2, b: "good"}
CURRENT STATE: Object {a: 2, b: "good"}
*/