https://github.com/biw/seal-store
Zero dependency state store where state object is immutable by any means other than a `setState` function
https://github.com/biw/seal-store
es6 immutable javascript seal-store state-management state-store
Last synced: 12 months ago
JSON representation
Zero dependency state store where state object is immutable by any means other than a `setState` function
- Host: GitHub
- URL: https://github.com/biw/seal-store
- Owner: biw
- License: mit
- Created: 2018-03-04T12:15:42.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-03-27T04:07:44.000Z (over 8 years ago)
- Last Synced: 2025-02-18T06:36:56.916Z (over 1 year ago)
- Topics: es6, immutable, javascript, seal-store, state-management, state-store
- Language: JavaScript
- Homepage:
- Size: 141 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# seal-store
[![Build Status][build-badge]][build]
[![version][version-badge]][package]
[![MIT License][license-badge]][license]
[![twitter][twitter-badge]][twitter]
[![Nice Seal Drawing][sealImage]][sealImageLink]
A simple framework agnostic state store where the `state` object is immutable by any means other than a `setState` function.
```js
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.
```js
const { state, setState } = initState({
saxPlayingSeal: 'looking good',
})
setState({ fish: 'in water' }) // => throws TypeError
```
This rule is true infinitely deep.
```js
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.
```js
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.
```js
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
```js
const { state, setState } = initState({
secondLevel: {
updated: false,
stillHere: true,
},
})
setState({ secondLevel: { updated: true } })
console.log(state) // => { secondLevel: { updated: true, stillHere: true } }
```
## Install
```sh
yarn add seal-store
```
or
```sh
npm add --save seal-store
```
or as a script tag
```html
const { state, setState } = window.sealStore({ 'saxPlayingSeal': 'looking good' })
```
## `proxy` Support
`seal-store` uses `proxy` objects. If you need to provide IE support, you'll need a [proxy polyfill](https://github.com/GoogleChrome/proxy-polyfill). You can look at the full compatibility table on [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy).
## LICENSE
MIT © [Ben Williams](https://719ben.com)
[sealImageLink]: https://www.youtube.com/watch?v=X0k7N0ASfp8
[sealImage]: https://media2.giphy.com/media/ySz02sRVFK372/giphy.gif
[build-badge]: https://img.shields.io/travis/719Ben/seal-store.svg?style=flat-square
[build]: https://travis-ci.org/719Ben/seal-store
[version-badge]: https://img.shields.io/npm/v/seal-store.svg?style=flat-square
[package]: https://www.npmjs.com/package/seal-store
[license-badge]: https://img.shields.io/npm/l/seal-store.svg?style=flat-square
[license]: https://github.com/719ben/seal-store/blob/master/LICENSE
[twitter-badge]: https://img.shields.io/twitter/follow/719ben.svg?style=flat-square&logo=twitter&label=Follow
[twitter]: https://twitter.com/719ben