Seal-store NPM

seal-store

A simple framework agnostic state store where the state object is immutable by any means other than a setState function.

import initState from 'seal-store'

const { state, setState } = initState({
  saxPlayingSeal: 'looking good',
})

state.saxPlayingSeal = 'looking bad' // => throws TypeError

console.log(state.saxPlayingSeal) // looking good

setState({ saxPlayingSeal: 'looking good but getting dizzy' })

console.log(state.saxPlayingSeal) // looking good but is getting dizzy

Properties of the state object must be defined in the initState and cannot be removed.

const { state, setState } = initState({
  saxPlayingSeal: 'looking good',
})

setState({ fish: 'in water' }) // => throws TypeError

This rule is true infinitely deep.

const { state, setState } = initState({
  secondLevel: { thirdLevel: { fourthLevel: { 'saxPlayingSeal': 'looking good' } } }
})

setState({ secondLevel: { thirdLevel: { fourthLevel: { fish: 'in water' } } } }) // => throws TypeError

There is one exception to adding/removing properties: arrays can shrink or grow. However, in any objects inside of them (other than arrays) properties cannot be added/removed.

const { state, setState } = initState({
  sealsInDocs: [{ name: 'spinningSeal' }],
})

setState({ sealsInReadme: [...state.sealsInReadme, { name: 'happySeal' }] }) // this is fine

setState({ sealsInReadme: [] }) // this is also fine

seal-store also comes with the ability to add a callback when any key in the state is updated.

const stateHasBeenUpdated = (newState) => { console.log('the state has updated') }

const { state, setState } = initState({
  updated: false,
}, stateHasBeenUpdated)

setState({ updated: true }) // => 'the state has been updated'

Unlike other state stores, seal-store doesn't need spread syntax ({ ...items }) for changes that apply to child objects

const { state, setState } = initState({
  secondLevel: {
    updated: false,
    stillHere: true,
  },
})

setState({ secondLevel: { updated: true } })

console.log(state) // => { secondLevel: { updated: true, stillHere: true } }

Install

yarn add seal-store

npm add --save seal-store

or as a script tag

<script src="https://unpkg.com/seal-store/dist/seal-store.umd.js"></script>
<script type="application/javascript">
  const { state, setState } = window.sealStore({ 'saxPlayingSeal': 'looking good' })
</script>

`proxy` Support

seal-store uses proxy objects. If you need to provide IE support, you'll need a proxy polyfill. You can look at the full compatibility table on MDN.