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 dizzyProperties 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 TypeErrorThis rule is true infinitely deep.
const { state, setState } = initState({
secondLevel: { thirdLevel: { fourthLevel: { 'saxPlayingSeal': 'looking good' } } }
})
setState({ secondLevel: { thirdLevel: { fourthLevel: { fish: 'in water' } } } }) // => throws TypeErrorThere 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 fineseal-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-storeor
npm add --save seal-storeor 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.
LICENSE
MIT © Ben Williams
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent