1.0.3 • Published 4 years ago

state-store-lite v1.0.3

Weekly downloads
-
License
MIT
Repository
-
Last release
4 years ago

State store lite

A lightweight state management system based on redux with a focus towards local state and single purpose actions.

I create this to aid my experimental projects where the unidirectional flow is disireable but the whole action and reducer setup is overkill and verbose.

Main Goals.

  1. Create a redux like store where the actions and reducer are generated by a simple function
  2. Keep the reducer flow of returning new state
  3. Must be consumable by unpkg.com
  4. Must be consumable by browser modules (using unpkg.com)
  5. Must be consumable by webpack

Installation

npm

# npm
npm i --save state-store-lite

# yarn
yarn add state-store-lite

browser (modules)

<!-- latest version -->
<script type="module">
  import * as stateStoreLite from 'https://unpkg.com/state-store-lite/es/statestorelit.mjs?module'
</script>

<!-- specific version -->
<script type="module">
  import * as stateStoreLite from 'https://unpkg.com/state-store-lite@1.0.2/es/statestorelit.mjs?module'
</script>

browser global imports

<!-- latest version -->
<script type="text/javascript" src="https://unpkg.com/state-store-lite"></script>
<!-- specific version -->
<script type="text/javascript" src="https://unpkg.com/state-store-lite"></script>

Basic Usage Example

import { createStore } from 'https://unpkg.com/state-store-lite@1.0.2/es/statestorelit.mjs?module'

const defaultState = {
	value: 0
}

const calculator = createStore({
	add(state, payload) {
  	return {
    	...state,
      value: state.value + payload,
    }
  },
  subtract(state, payload) {
  	return {
    	...state,
      value: state.value - payload,
    }
  }
}, defaultState)

calculator.actions.add(15)
console.log(calculator.getState().value)

calculator.actions.add(3)
console.log(calculator.getState().value)

calculator.actions.subtract(15)
console.log(calculator.getState().value)

store.subscribe(() => {
  console.log('Subcription', calculator.getState().value)
})

Inspirations

  1. Redux
  2. Redux Actions