state-prism
v0.0.5
Published
`state-prism` lets you subscribe to state changes. It is thin layer on top of [`on-change`](https://github.com/sindresorhus/on-change).
Downloads
9
Readme
:sparkles: Features
state-prism
lets you subscribe to state changes. It is thin layer on top of on-change
.
I use it mainly for games. Whenever the game's state is updated, I trigger a callback to re render UI components that are dependent on that state.
:wrench: Example usage
Let's say my state looks like this:
state.js
import { init } from 'state-prism'
const state = {
player: {
mana: 10,
},
}
export default init(state)
Somewhere in my code the player spends 5 mana:
battle.js
import state from './state'
state.player.mana -= 5
Then I can re render my UI component that renders the mana.
ui.js
import { subscribe } from 'state-prism'
subscribe('player.mana', (mana) => {
renderMana(mana)
})
Using this pattern, the state logic and the render functions can be kept separate.
:package: Install
npm
npm install state-prism
yarn
yarn add state-prism
:newspaper: API
Basic
init - Initialize state-prism
with your state object. Enables listening to changes.
subscribe - Attach a callback to a path in your state. The callback will be called whenever the state changes.
Advanced
target - Access the original state object.
Useful for:
- Logging
- Destructuring
getSubscriberCount - Get the total subscribers count.
:book: Recipes
Dynamically activate listeners
If you are creating an advanced application you probably don't want all listeners to be active at the same time.
For example, if you only want to render mana during battle
, you can do this:
import * as prism from 'state-prism'
prism.subscribe(
'player.mana',
(mana) => {
renderMana(mana)
},
{ enabled: () => state.scene === 'battle' }
)
:computer: Develop
Commands
| Command | Description |
| -------------- | ---------------------------------------------- |
| yarn build
| Generate files in the dist
folder |
| yarn release
| Start the process to release a new version |
| yarn qa
| Run tsc
and xo
|
| yarn clean
| Remove build artefact (.tgz
file) |
| yarn go
| Builds, packs and installs to example
folder |
Workflow
- Make changes
- Update tests
yarn go
and verify that your changes work.- Commit to
master
or makePR
Release
yarn release